Saltar a contenido

4.6 Tab

El componente Tab funciona como un contenedor organizado para mostrar múltiples elementos de pestaña, permitiendo a los usuarios navegar entre diferentes secciones de contenido. Mejora la experiencia del usuario al presentar información de manera segmentada.

Cada pestaña, representada por un Tabitem, puede contener información específica o funcionalidades relacionadas entre sí. Esto permite una presentación ordenada y facilita que los usuarios encuentren rápidamente lo que están buscando. Además, el diseño segmentado proporciona una visión clara de la estructura de la aplicación, mejorando la comprensión y la usabilidad.

Atributo Valor por defecto Tipo Descripción
Comunes id null String Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}.
render true Boolean o JEXLExpression Expresión EL para evaluar si el componente debe mostrarse.
onBeforeRender null String Método JS a ejecutar antes de que el componente actual sea renderizado.
onAfterRender null String Método JS que se ejecutará una vez renderizado el componente actual.
action null String Identificador de la acción a realizar cuando el usuario interactúa con este componente.
allowsPartialRestore false Boolean Si el estado del componente actual debe restaurarse cuando el usuario vuelva a la vista.

4.6.1 Tabitem

Atributo Valor por defecto Tipo Descripción
Comunes id null String Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}.
render true Boolean o JEXLExpression Expresión EL para evaluar si el componente debe mostrarse.
onBeforeRender null String Método JS a ejecutar antes de que el componente actual sea renderizado.
onAfterRender null String Método JS que se ejecutará una vez renderizado el componente actual.
action null String Identificador de la acción a realizar cuando el usuario interactúa con este componente.
allowsPartialRestore false Boolean Si el estado del componente actual debe restaurarse cuando el usuario vuelva a la vista.
label null String Etiqueta que se mostrará.
properties null String Lista separada por comas de las propiedades de la entidad actual que se mostrarán en la pestaña actual. 
<tab>
    <tabitem label="Tab1" properties="d_prueba">
    </tabitem>
    <tabitem label="Tab2">
    </tabitem>
    <tabitem label="Tab3">
    </tabitem>
    <tabitem label="Tab4">
    </tabitem>
</tab>

img.png

4.6.2 Componentes del tab-tabitem