Saltar al contenido principal
Version: próxima

Pestañas y contenedor de pestaña

Una pestaña es un componente muy útil para dividir los componentes de la pantalla en pestañas:

Pestaña

Esqueleto de XML

<tab id="[tab-identifier]" initial-load="[initial-load]" target-action="[target-action]" maximize="[maximize-tab]">
<tabcontainer id="[tabcontainer-identifier-1]">
...
<tabcontainer id="[tabcontainer-identifier-n]">
<dependency...></dependency>
<context-menu...></context-menu>
</tab>

The tab list is filled with the value and label fields of the query/enum launched with [target-action].

Estructura de pestañas

<tab id="[tab-identifier]" initial-load="[initial-load]" target-action="[target-action]">
...
</tab>
ElementoUsoVarias instanciasDescripción
tabObligatorioNoNodo global de pestaña. Define los atributos de la pestaña
tabcontainerObligatorioSiLista de contenedores de pestañas a mostrar
dependencyOpcionalSiLista de dependencias de la pestaña
context-menuOpcionalNoMenú contextual de la pestaña

Atributos de pestaña

AtributoUsoTipoDescripciónValores
idObligatorioStringIdentificador de pestañas. Tiene que coincidir con los valores definidos en el target-action.
carga-inicialObligatorioStringLlamada de acción al servidor para cargar los datos de criterio (se lanza al cargar la ventana)enum (para enumerado) o query (para consulta)
target-actionObligatorioStringIdentificador de consulta en el servidor
styleOpcionalStringClases CSS de la pestañaNota: Aquí puedes usar la clase expand para permitir que la ventana se expanda
maximizeOpcionalBooleanMostrar el icono maximizar o no

Estructura del contenedor de pestaña

A tabcontainer is a window opened when a tab is selected. Note that [tabcontainer-identifier] must match the value of the query/enumerated list set at Tab element.

<tabcontainer id="[tabcontainer-identifier]" type="[type]" label="[label]" style="[style]" expandible="[expandible]">
...
</tabcontainer>

Atributos del contenedor de pestaña

AtributoUsoTipoDescripciónValores
idObligatorioStringIdentificador del contenedor. Tiene que coincidir con los valores definidos en el target-action.
labelOpcionalStringTítulo del contenedorNota: Puedes usar literales i18n
styleOpcionalStringClases CSS del contenedorNota: Aquí puedes usar la clase expand para permitir que la ventana se expanda
typeOpcionalStringTipo de etiqueta HTML del contenedordiv, span, p, ...
expandibleOpcionalStringCómo expandir los elementos del contenedorvertical, horizontal