Crear la página de inicio
Para mejorar la navegación, en esta sección puede añadir elementos emergentes. Los elementos emergentes ayudarán a estructurar la interfaz de usuario de forma más eficaz y a proporcionar una mejor experiencia de usuario.
1. Defina el siguiente CSS para un elemento emergente de página completa en > :
.full-page-popup {
background-color: $PTC-dark-grey;
}
Los estilos de aplicación ahora deberían ser similares a los siguientes:
2. Vaya a la vista Identificación.
3. Añada un widget del tipo Elemento emergente al lienzo y configure las siguientes propiedades:
◦ Clase: introduzca full-page-popup
◦ Anchura (px, %, vh, em)introduzca 100 %
◦ Altura (px, %, vh, em)introduzca 100 %
◦ Visible: seleccione la casilla
◦ ID de Studio: introduzca landingPagePopup
4. Cree los siguientes enlaces:
◦ Seleccione scan-1 en el árbol del proyecto. Arrastre el evento Cancelado por el usuario y suéltelo en landingPagePopup en el árbol del proyecto. Seleccione Mostrar emergente en la ventana Seleccionar destino de enlace y pulse en Enlazar.
◦ Seleccione Iniciar escaneo en el árbol del proyecto. Arrastre el evento Pulsar del botón y suéltelo en landingPagePopup en el árbol del proyecto. Seleccione Ocultar emergente en la ventana Seleccionar destino de enlace y pulse en Enlazar.
5. A continuación, añada un widget del tipo Diseño de cuadrícula al widget Elemento emergente para dar más estructura al diseño.
6. Con el widget Diseño de cuadrícula seleccionado, seleccione la casilla Filas espaciadas uniformemente en el panel DETALLES.
7. Añada dos filas más a la cuadrícula pulsando Añadir fila dos veces (en la sección ACCIONES DE CUADRÍCULA del panel DETALLES).
8. Deje la primera fila vacía.
9. Seleccione la segunda fila y complete lo siguiente:
◦ Dirección de filas: seleccione Columna
◦ Justificar contenido: seleccione Centro
◦ Alinear elementos: seleccione Centro
◦ Añada un widget del tipo Etiqueta y configure las siguientes propiedades:
▪ Texto: introduzca Le damos la bienvenida a
▪ Clase: introduzca simple-label title-label
▪ ID de Studio: introduzca welcomeLabel
◦ Añada un segundo widget del tipo Etiqueta y configure las siguientes propiedades:
▪ Texto: introduzca Displaying Dynamic Assets 101 sample
▪ Clase: introduzca simple-label sub-title-label
▪ ID de Studio: introduzca experienceTitleLabel
10. Seleccione la tercera fila y complete lo siguiente:
◦ Defina Dirección de filas como Fila
◦ Defina Justificar contenido como Centro
◦ Defina Alinear elementos como Fin
◦ Defina Caracteres de relleno (p. ej. 10 px 10 px 20 px 10 px) como 20px
11. A continuación, mueva el botón Iniciar escaneo a la tercera fila y actualice las siguientes propiedades:
◦ Texto: introduzca Escanear el código QR
◦ Clase: introduzca long-button--green
◦ ID de Studio: introduzca startScanButton
12. Ahora que tiene una página de inicio, añada un elemento emergente de identificación del producto.