Cada componente Angular incluye un componente adicional para demostración con el nombre app-demo-nombre-del-componente, al que denominamos genéricamente app-demo.
Ejecutar la app-demo es muy sencillo, siguiendo las instrucciones indicadas en esta página
La app-demo permite identificar subcomponentes, variantes, switches, y los inputs, tanto los de texto como las direcciones de las imágenes. Permite además controlar como se despliega cuando varían el ancho y el alto, así como quitar los textos e imágenes por omisión.
Barra de control
La barra de control permite simular el comportamiento del componente en distintas circunstancias. Aquí un detalle de las opciones
- Disposition: mueve la barra lateral del costado (Columns) hacia abajo (Rows), permitiendo usar todo el ancho de la pantalla y analizar el comportamiento del componente cuando cambia el ancho de la ventana del navegador.
- Width: cambia el ancho del div que contiene al componente.
- Height: cambia el alto del div que contiene al componente.
- Remove texts: todos los textos de un componente son atributos y pueden cambiar. El componente tiene valores por omisión para poder mostrarlo. Al deshabilitar esta opción se muestra el componente sin textos, tal como se desplegará en un ambiente de producción (se modifica con el atributo defaultTexts).
- Remove Images: todas las imágenes de un componente son atributos y pueden cambiar. El componente tiene valores por omisión para poder mostrarlo. Al deshabilitar esta opción se muestra el componente sin imágenes, tal como se desplegará en un ambiente de producción (se modifica con el atributo defaultImages).
Barra lateral
La barra lateral (aunque con la opción Disposition puede llevarse abajo del componente la llamamos lateral, dado que esta es la ubicación habitual) permite comprender el alcance y comportamiento de todos los atributos de un componente y sus subcomponentes.
El componente principal
El primer cuadro de la barra lateral corresponde siempre al componente principal. Sus atributos y opciones se describen a continuación
- Identificador (id): el título, sobre fondo celeste, corresponde al identificador del componente en la aplicación (atributo id). En producción dependerá de lo que el desarrollador decida, pero es obligatorio incluir un id para poder acceder a los atributos de los sucomponentes.
- Switches: los switches (se corresponden con las propiedades booleanas en Figma) permiten mostrar/ocultar partes del componente y si se agregó customCSS podría eventualmente cambiar otras propiedades. En el panel lateral los links dan acceso al comportamiento al modificar su valor.
- Variants: las variantes (se corresponden con las propiedades tipo variant en Figma) permiten cambiar la estructura del HTML del componente. En el panel lateral los links dan acceso al comportamiento al modificar su valor.
- Text Inputs: se corresponden con los atributos de todos los elementos textuales y de imagen en el componente. Se muestra el nombre del atributo y valor por omisión. El final del nombre indica el tipo de text input del que se trata
- _src: es la fuente de una imagen
- _href: es el destino (atributo href) de un vínculo
- _plch: es el texto del placeholder de un campo
- _srcBkg: es la fuente de una imagen de fondo
- ninguno de los anteriores: es un texto que se despliega en el componente.
Los subcomponentes
El cuadro correspondiente a cada subcomponente es similar al del componente principal y solo cambia en el título, donde se agregan:
- Checkbox de identificación: el checkbox a la izquierda permite identificar visualmente el componente, agregando un cuadro rojo alrededor.
- Identificador (id): después del nombre del subcomponente aparece el identificador (atributo id) del componente, que se forma con el nombre de todos los componentes ancestros separados por puntos (en este caso solo el padre).
Es importante hacer notar que mientras el identificador del componente principal se puede cambiar, y es algo imprescindible para identificar las distintas instancias de un componente en una misma pantalla, los de los subcomponentes no se pueden alterar.
Leave a Reply