Pestañas y acordeón
Ambos organizan una pantalla densa en partes. Las pestañas muestran una parte cada vez y mantienen siempre a la vista la lista de partes; un acordeón apila las partes como secciones plegables, con una o varias abiertas. Debajo están los componentes reales del cliente React de AWE: haz clic en ellos.
Pestañas
Una tab contiene un tabcontainer por página. La lista de pestañas viene de una lista enumerada o de una consulta del servidor (initial-load y
target-action) y el valor de cada opción es el id de su tabcontainer. Aquí la vista previa rellena esa lista con una fija.
<tab id="demo" initial-load="enum" target-action="CustomerTabs">
<tabcontainer id="general">
<tag type="p" label="Name, tax id and the main contact of the customer." />
</tabcontainer>
<tabcontainer id="billing">
<tag type="p"
label="Payment method, invoicing address and the invoices of the year." />
</tabcontainer>
<tabcontainer id="history">
<tag type="p"
label="Orders, incidents and every change made to the customer." />
</tabcontainer>
</tab>
- 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 |
|---|---|---|
orientation | Orientación | horizontalvertical |
Acordeón
Un accordion contiene elementos accordion-item, cada uno con un label para su cabecera. Por defecto (autocollapse="true"), abrir un elemento
cierra los demás.
<accordion id="demo">
<accordion-item id="shipping" label="Shipping">
<tag type="p" label="Address, carrier and delivery window of the order." />
</accordion-item>
<accordion-item id="payment" label="Payment">
<tag type="p" label="Payment method, instalments and the invoice data." />
</accordion-item>
<accordion-item id="notes" label="Notes">
<tag type="p"
label="Free text for the warehouse and for the customer service." />
</accordion-item>
</accordion>
- 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 |
|---|---|---|
autocollapse | Elementos abiertos | truefalse |
Recetas
Formulario dividido en pestañas
Cada tabcontainer contiene cualquier componente. Una pestaña con un campo inválido se marca en la lista, para que el usuario sepa dónde mirar.
<tab id="form" initial-load="enum" target-action="FormTabs">
<tabcontainer id="person">
<criteria id="Name" component="text" label="Nombre" placeholder="Nombre completo" />
<criteria id="Email" component="text" label="Correo" icon="lucide:mail" />
</tabcontainer>
<tabcontainer id="company">
<criteria id="Company" component="text" label="Nombre de la empresa" />
<criteria id="Size" component="numeric" label="Empleados" />
</tabcontainer>
</tab>
Acordeón con varias secciones abiertas
autocollapse="false" deja que el usuario mantenga varias secciones abiertas a la vez, para compararlas.
<accordion id="faq" autocollapse="false">
<accordion-item id="what" label="¿Qué es un criterio?">
<tag type="p" label="Una entrada de una pantalla: obtiene un valor del usuario y lo envía al servidor." />
</accordion-item>
<accordion-item id="where" label="¿De dónde salen las opciones?">
<tag type="p" label="De una lista enumerada o de una consulta del servidor." />
</accordion-item>
</accordion>
Eventos y acciones
Ninguno tiene un evento propio. El usuario elige la pestaña o la sección; para hacerlo desde la pantalla, una dependencia
cambia el atributo selected de un acordeón con el id del elemento que se abre (véase
el acordeón), y una variable hace que una pantalla se abra en una pestaña dada. Un tabcontainer con
deferred="true" carga sus datos la primera vez que se muestra su pestaña.