Version: Next (5.0)

Ventana y diseño

Una pantalla se construye con contenedores. Una ventana es el contenedor con título que agrupa contenido relacionado; un redimensionable deja que el usuario decida cuánto espacio ocupa una parte; y el diseño (expandible y los estilos expand) indica cómo se reparte el espacio libre de un contenedor entre sus hijos. La plantilla de la pantalla lo coloca todo: la fila de botones, las migas de pan y la zona donde van las ventanas.

Ventana

Una window tiene una barra de título con un icono y una ayuda opcionales, y un cuerpo (panel-body) y un pie (panel-footer) como etiquetas hijas. Con maximize="true" obtiene un botón que la hace crecer sobre la zona central de la plantilla y la restaura; en la vista previa cubre el área de la vista previa, que hace de esa zona central.

Vista previa en vivo

ClaroOscuro

XML

<window id="demo" label="Customer data" icon="lucide:user">
  <tag type="div" style="panel-body">
    <criteria id="Name" component="text" label="Name" />
    <criteria id="Email" component="text" label="Email" />
  </tag>
  <tag type="div" style="panel-footer">
    <button id="Save" label="Save" style="btn-primary" />
  </tag>
</window>

Atributos
Referencia completa

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

Atributo	Control	Valores
`label`	Título	text
`icon`	Icono	`lucide:userlucide:filterlucide:listlucide:settings`
`help`	Texto de ayuda	text
`maximize`	Botón de maximizar	true / false
`tag`	Pie con un botón	true / false

La búsqueda avanzada (advanced-mode) y las búsquedas guardadas (saved-searches) necesitan un bloque advanced de criterios y el servidor de la pantalla: consulta la búsqueda avanzada.

Redimensionable

Un resizable muestra un tirador en cada lado indicado en directions; el usuario lo arrastra para cambiar el tamaño del propio contenedor. En una disposición flex, el hermano junto al tirador da o toma el espacio, así que el resto de la pantalla no se mueve. Un redimensionable necesita un tamaño inicial: una pantalla real lo da con una clase de rejilla en style, la vista previa con una clase propia. Los tiradores se desactivan en anchos pequeños con los estilos no-resizable-*.

Vista previa en vivo

ClaroOscuro

XML

<resizable id="demo" directions="right bottom">
  <tag type="p" label="Drag a handle to change the size of this panel." />
</resizable>

Atributos
Referencia completa

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

Atributo	Control	Valores
`directions`	Tirador derecho	true / false
`directions`	Tirador izquierdo	true / false
`directions`	Tirador inferior	true / false
`directions`	Tirador superior	true / false

Recetas

Expandir para llenar la altura

Un contenedor con expandible="vertical" dispone sus hijos en columna. Los que tienen el estilo expand se reparten el espacio libre (expand-2x toma el doble); los demás mantienen su altura. Aquí la ventana de criterios mantiene su tamaño y la de resultados ocupa el resto.

<tag type="div" expandible="vertical">
  <window id="CriteriaWindow" label="Criterios" icon="lucide:filter">
    <tag type="div" style="panel-body">
      <criteria id="Search" component="text" label="Buscar" placeholder="Nombre o correo" />
    </tag>
  </window>
  <window id="ResultsWindow" label="Resultados" icon="lucide:list" style="expand">
    <tag type="div" style="panel-body expand" label="Esta ventana ocupa toda la altura que queda." />
  </window>
</tag>

La altura del contenedor la da la plantilla de una pantalla; la vista previa le da 18rem. El diseño explica la disposición horizontal y los demás estilos de expansión.

Plantilla de pantalla con migas de pan

La plantilla window de una pantalla dibuja una cabecera con las migas de pan de la ruta del menú y, a su derecha, los botones de la fuente buttons; la fuente center contiene las ventanas. Desde #925, window-header en la screen elige breadcrumb (el valor por defecto) o none, que deja solo la fila de botones.

<screen label="Lista de clientes" template="window" window-header="breadcrumb">
  <tag source="buttons">
    <button id="NewCustomer" label="Nuevo cliente" icon="lucide:plus" style="btn-primary" />
  </tag>
  <tag source="center">
    <window id="ListWindow" label="Clientes" icon="lucide:users">
      <tag type="div" style="panel-body" label="Aquí va la tabla de clientes." />
    </window>
  </tag>
</screen>

Con window-header="none" la cabecera conserva la fila de botones y quita las migas de pan; la propiedad de aplicación awe.application.window-header fija el valor por defecto de todas las pantallas.

<screen label="Lista de clientes" template="window" window-header="none">
  ...
</screen>

Eventos y acciones

Ni la ventana ni el redimensionable tienen un evento o una acción propios: la ventana es un contenedor, y el usuario la maximiza o arrastra un tirador. Una dependencia puede mostrar u ocultar una ventana, y el estado de maximizado solo se recuerda mientras la pantalla está abierta.

Más

Documentación completa de la ventana, del redimensionable y del diseño.
Referencia XSD del elemento window y del elemento resizable.

Ventana​

Redimensionable​

Recetas​

Expandir para llenar la altura​

Plantilla de pantalla con migas de pan​

Eventos y acciones​

Más​