@atmgrupomaggioli/iris-tabs v1.2.0
iris-tabs
Overview
Las tabs o pestañas, son un componente que se utiliza para organizar y presentar contenido de manera estructurada en múltiples secciones dentro de una misma ventana o pantalla.
Cada pestaña, suele representar una categoría o conjunto de información relacionada, y al seleccionar una pestaña, se muestra el contenido asociado a esa categoría mientras que el contenido de las otras pestañas permanece oculto.
Las tabs permiten a los usuarios alternar fácilmente entre diferentes partes del contenido sin necesidad de cargar páginas adicionales o perder la orientación dentro de la aplicación.
Actualmente tenemos dos tipos de tabs
Tabs Vertical.
Las tabs verticales están diseñadas para escenarios donde la navegación ocupa una columna lateral.
Tabs Horizontal.
Las tabs horizontales se colocan en la parte superior del contenido.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
orientation | orientation | Tipo de orientación de las tabs. | "horizontal" \| "vertical" | 'vertical' |
Events
| Event | Description | Type |
|---|---|---|
ready | Evento lanzado cuando el componente está complementamente listo. | CustomEvent<void> |
tabClosed | Evento lanzado cuando se cierra una tab. | CustomEvent<{ tabID: string; tabs: TabDefinition[]; }> |
tabSelected | Evento lanzado cuando se selecciona una tab. | CustomEvent<string> |
Methods
addTab(_tab: TabDefinition) => Promise<string>
Añade una nueva tab (solo para tabs dinámicas).
Parameters
| Name | Type | Description |
|---|---|---|
_tab | TabDefinition |
Returns
Type: Promise<string>
selectTab(tabId: string) => Promise<void>
Permite seleccionar una tab programáticamente.
Parameters
| Name | Type | Description |
|---|---|---|
tabId | string | ID de la tabs a seleccionar. undefined para no seleccionar ninguna. |
Returns
Type: Promise<void>
selectTabByURL(url: string) => Promise<void>
Permite seleccionar la URL de la tab.
Parameters
| Name | Type | Description |
|---|---|---|
url | string |
Returns
Type: Promise<void>
Dependencies
Depends on
Graph
graph TD;
iris-tabs --> iris-tab
iris-tabs --> iris-tabcontent
style iris-tabs fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
🧩 Exported Types
TabDefinition
| Prop | Type | Description | Default |
|---|---|---|---|
id | string | ID único de la pestaña | — |
label (required) | string | Texto visible en la pestaña | — |
closable | boolean | Si puede ser cerrada | — |
icon | string | Icono opcional para mostrar junto al label | — |
content | HTMLElement | string | Contenido de las tabs dinámicas. | — |
url | string | URL de la pestaña. | — |