Saltar al contenido principal
Version: Next (5.0)

Etiquetas y listas

Una tag es el bloque de construcción básico de una pantalla. Con un type genera un elemento HTML (div, p, h3...) que agrupa otros elementos, aplica clases CSS y muestra un texto o un icono. Una tag-list repite una etiqueta por cada fila de una consulta, y <text> escribe texto sin formato dentro de una etiqueta. Los elementos header-tag son las etiquetas de la cabecera de identidad de un panel lateral.

Etiqueta​

El texto de una etiqueta es su label, traducido con los locales de la aplicación. Los dos estilos de título de sección del sistema de diseño necesitan un tipo de encabezado (h2 a h6) para que los lectores de pantalla anuncien la sección. El icon es decorativo y solo se dibuja en una etiqueta con label.

Vista previa en vivo
XML
<tag id="demo" type="h3" label="Customer identity" style="awe-section-title" />

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

AtributoControlValores
typeElemento HTMLh3pdivspan
labelEtiquetatext
styleEstiloawe-section-titleawe-form-section-title
iconIconolucide:userlucide:key-roundlucide:maillucide:settings

Recetas​

Secciones de un formulario​

awe-form-section-title titula una sección de un formulario con su icono y un separador sobre cada título salvo el primero. Mantén los títulos y los criterios del formulario como hermanos en el mismo contenedor.

<tag type="div" style="panel-body">
  <tag type="h3" style="awe-form-section-title" label="Identidad" icon="user" />
  <criteria id="FullName" component="text" label="Nombre completo" />
  <tag type="h3" style="awe-form-section-title" label="Acceso y seguridad" icon="lucide:key-round" />
  <criteria id="Password" component="password" label="Contraseña" />
</tag>

Texto escrito tal cual​

Una etiqueta con label escribe texto traducido. La forma <text> escribe el texto tal cual, sin buscarlo en los locales; se usa en lugar de la etiqueta label, nunca junto a ella.

<tag type="p"><text>Las facturas se envían el primer día de cada mes.</text></tag>

Una etiqueta por cada fila​

Una tag-list toma las filas de su consulta y genera sus etiquetas hijas una vez por fila, sustituyendo [columna] por el valor de la fila. Su type es el elemento que las contiene: aquí un ul de li. Las filas vienen del servidor; la vista previa las rellena con un modelo fijo.

<tag-list id="CustomerList" type="ul" initial-load="query" target-action="CustomerQuery">
  <tag type="li" label="[name] (plan [plan])" />
</tag-list>

Eventos y acciones​

Una etiqueta no tiene evento ni acción propios. Una tag-list se recarga cuando pasa su periodo de autorefresh o cuando una acción carga su destino, y una dependencia puede mostrar u ocultar cualquier etiqueta.

Más​