Tabs
Lista de pestañas interactiva con subrayado en degradado para la pestaña activa y cambio de panel en el cliente.
Activo: resumen
Resumen general de la funcionalidad, la audiencia y los resultados.
Guía paso a paso con ejemplos y valores predeterminados recomendados.
Propiedades, eventos y detalles de integración de la interfaz pública.
Activo: uso
Resumen general de la funcionalidad, la audiencia y los resultados.
Guía paso a paso con ejemplos y valores predeterminados recomendados.
Propiedades, eventos y detalles de integración de la interfaz pública.
Activo: api
Resumen general de la funcionalidad, la audiencia y los resultados.
Guía paso a paso con ejemplos y valores predeterminados recomendados.
Propiedades, eventos y detalles de integración de la interfaz pública.
Selecciona la primera pestaña por defecto
Sin una prop active, se selecciona la primera pestaña.
Guía paso a paso con ejemplos y valores predeterminados recomendados.
Propiedades, eventos y detalles de integración de la interfaz pública.
Uso
<Tabs
tabs={[
{ id: 'overview', label: 'Overview' },
{ id: 'usage', label: 'Usage' },
{ id: 'api', label: 'API' },
]}
active="usage"
>
<p slot="overview">Overview panel content.</p>
<p slot="usage">Usage panel content.</p>
<p slot="api">API panel content.</p>
</Tabs>Props
| Prop | Tipo | Predeterminado | Descripción |
|---|---|---|---|
tabs | { id: string; label: string }[] | — | Lista ordenada de botones de pestaña renderizados en el tablist. |
active | string | id de la primera pestaña | id de la pestaña seleccionada inicialmente. |
Haz clic en una pestaña o usa las teclas de flecha para cambiar de panel. Pasa slots con nombre por cada id de pestaña para que todos los paneles tengan contenido.