Inspector de productos 301: crear la ventana emergente de propiedades
Requisitos previos
Antes de comenzar esta sección, asegúrese de haber completado Inspector de productos 201: crear el buscador de piezas.
En este punto, los metadatos asociados con el componente seleccionado se cargan y renderizan dentro de la interfaz de usuario 2D. Los indicadores visuales realzan el elemento actualmente seleccionado para mejorar la orientación del usuario. Para permitir una inspección más profunda de la jerarquía del modelo, deberá integrar un panel de propiedades que muestra dinámicamente metadatos extendidos para el subconjunto seleccionado.
1. Defina el siguiente CSS para un elemento emergente de lado izquierdo en > :
.left-side-popup {
position: fixed;
left: 0px !important;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0px 5px 5px 0px;
background-color: $PTC-dark-grey;
opacity: 90%;
}
2. Vaya al lienzo 2D de la vista Visualización.
3. Añada un widget del tipo Elemento emergente al lienzo y configure las siguientes propiedades:
◦ Clase: introduzca left-side-popup
◦ ID de Studio: introduzca propertyPopup
4. A continuación, añada un widget del tipo Diseño de cuadrícula a Elemento emergente.
5. Con el widget Diseño de cuadrícula seleccionado, introduzca 10 px en el campo Margen en el panel DETALLES.
6. Seleccione la columna debajo del nuevo elemento emergente en el árbol del proyecto para mostrar su panel DETALLES. En ACCIONES DE CUADRÍCULA, pulse en Añadir columna.
7. Seleccione la columna izquierda y configure las siguientes propiedades:
◦ Dirección de filas: seleccione Fila
◦ Justificar contenido: seleccione Inicio
◦ Alinear elementos: seleccione Centro
8. Añada una Etiqueta a la columna izquierda y configure las siguientes propiedades:
◦ Texto: introduzca Detalles de la pieza
◦ Clase: introduzca simple-label title-label
◦ Caracteres de relleno (p. ej. 10 px 10 px 20 px 10 px): introduzca 0 px 0 px 10 px 0 px
◦ ID de Studio: introduzca partDetailsTitleLabel
9. Seleccione la columna derecha y configure las siguientes propiedades:
◦ Dirección de filas: seleccione Fila
◦ Justificar contenido: seleccione Fin
◦ Alinear elementos: seleccione Centro
10. Añada un Botón a la columna derecha y configure las siguientes propiedades:
◦ Texto: introduzca Detalles de la pieza
◦ Clase: introduzca simple-label title-label
◦ Caracteres de relleno (p. ej. 10 px 10 px 20 px 10 px): introduzca 0 px 0 px 10 px 0 px
◦ ID de Studio: introduzca closePartDetailsButton
11. Arrastre el evento Pulsar de closePartDetailsButton y suéltelo en propertyPopup en el árbol del proyecto. Seleccione Ocultar emergente en la ventana Seleccionar destino de enlace y pulse en Enlazar.
12. Seleccione fila en propertyPopup en el árbol del proyecto. Pulse en Añadir fila en el panel DETALLES debajo de ACCIONES DE CUADRÍCULA.
13. Añada un widget del tipo Repetidor a la nueva fila (segunda fila). Introduzca propertiesList para ID de Studio.
14. Añada un widget del tipo Diseño de cuadrícula al Repetidor.
15. Seleccione fila en propertiesList en el árbol del proyecto. Pulse en Añadir fila en el panel DETALLES debajo de ACCIONES DE CUADRÍCULA.
.
16. Añada una Etiqueta a la columna izquierda y configure las siguientes propiedades:
◦ Texto: introduzca {{item.name}}
◦ Clase: introduzca simple-label simple-label--green
◦ Caracteres de relleno (p. ej. 10 px 10 px 20 px 10 px): introduzca 0 px 0 px 10 px 0 px
◦ ID de Studio: introduzca itemNameLabel
17. Ahora, añada una Etiqueta a la columna derecha y configure las siguientes propiedades:
◦ Texto: introduzca {{item.name}}
◦ Clase: introduzca simple-label
◦ Caracteres de relleno (p. ej. 10 px 10 px 20 px 10 px): introduzca 0 px 0 px 10 px 0 px
◦ ID de Studio: introduzca itemValueLabel
18. Defina el siguiente CSS adicional en > :
.simple-label--green {
color: $PTC-neon-green;
font-weight: 600;
}
19. ¡Enhorabuena, ha completado este caso práctico! A continuación, consulte Caso práctico: ver datos del modelo significativos con un explorador de productos.