Tabs Pestañas
Introduction
Un componente de diseño visual que organiza información densa y relacionada en múltiples paneles mutuamente excluyentes. Los usuarios pueden alternar entre paneles sin cargar nuevas páginas ni saturar el lienzo.
El componente Tabs está totalmente integrado como bloque tabs en el Page Builder, permitiendo a los autores construir vistas de pestañas, configurar propiedades visuales y ordenar bloques anidados directamente en las plantillas.
Usage
Estas configuraciones muestran exactamente cómo se construyen los elementos de bloque del page-builder.
1. Pestañas horizontales clásicas (variante Line)
Nuestro diseño estándar con indicador de activación subrayado y transiciones de deslizamiento fluidas. Perfecto para funciones de producto, detalles o submenús de documentación.
{
"type": "tabs",
"variant": "line",
"size": "md",
"items": [
{
"value": "features",
"label": "⚡ Key Features",
"content": [
{
"type": "text",
"content": "Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction."
}
]
},
{
"value": "pricing",
"label": "💎 Pricing Plans",
"content": [
{
"type": "text",
"content": "Flexible subscription pricing for individuals, start-ups, and scaling enterprise workspaces."
}
]
}
]
}
Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction.
2. Estilo de carpeta cerrada (tamaño compacto)
Renderiza la lista de pestañas con botones con bordes tipo separadores de carpeta. Excelente para menús de panel, preferencias de interfaz o secciones de configuración compactas.
{
"type": "tabs",
"variant": "enclosed",
"size": "sm",
"items": [
{
"value": "profile",
"label": "User Profile",
"content": [
{
"type": "text",
"content": "Manage personal information, billing details, and customized regional preferences."
}
]
},
{
"value": "security",
"label": "Security",
"content": [
{
"type": "text",
"content": "Configure multi-factor authentication codes, view active sessions, and update credentials."
}
]
}
]
}
Manage personal information, billing details, and customized regional preferences.
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Elementos de pestaña (items) | list | - | Arreglo de bloques de pestaña. Cada uno requiere value único, texto label y lista content de nodos hijos. |
Variante visual (variant) | select | "line" | Estilo de apariencia. • "line" — Disparadores de texto mínimos con indicador subrayado. • "subtle" — Etiquetas con fondo redondeado sombreado. • "enclosed" — Diseño de pestaña de carpeta con borde tradicional. |
Escala de tamaño (size) | select | "md" | Controla relleno, espaciado y tamaño de fuente. • Opciones: "xs", "sm", "md", "lg". |
Orientación (orientation) | select | "horizontal" | Eje estructural de la lista de disparadores. "horizontal" o "vertical". |
Modo de activación (activationMode) | select | "automatic" | • "automatic" — El panel cambia al recibir foco. • "manual" — Solo al pulsar Space o Enter. |
Bucle de foco (loopFocus) | boolean | true | Cicla el foco de teclado de vuelta al primer elemento al pasar el final. |
Montaje diferido (lazyMount) | boolean | false | Retrasa el renderizado de paneles inactivos hasta su primer acceso. |
Accessibility & Developer Notes
Este componente cumple de forma nativa el Patrón de Diseño WAI-ARIA Tabs. Al hidratarse, implementa las siguientes capas críticas:
- Asignación de roles semánticos:
role="tablist"en la lista,role="tab"en los disparadores,aria-selectedrefleja el estado activo yaria-controlsreferencia los IDs de panel automáticamente. - Navegación de foco roving: Las flechas del teclado navegan suavemente con
tabIndexde foco móvil.HomeoEndsaltan a los extremos. - Indicador deslizante CSS dinámico: Un slider absoluto consulta métricas de posición del disparador activo para animar translaciones sin thrashing de diseño.
- Eludir límites del Hono Reconciler: En islas Preact que envuelven HTML estático, el gestor de estado manipula atributos (
data-selected,aria-selected,tabindex,hidden) directamente en eventos, garantizando rendimiento independiente de la línea de tiempo del reconciler.