Tab

Sistema de pestañas para organizar contenido en paneles con navegación. Usa Alpine.js para la interactividad.

Uso básico

Contenido de la pestaña General.

Contenido de la pestaña Seguridad.

Contenido de la pestaña Notificaciones.

<x-kore::tab selected="general">
    <x-kore::tab.item id="general" label="General">
        Contenido de la pestaña General.
    </x-kore::tab.item>

    <x-kore::tab.item id="seguridad" label="Seguridad">
        Contenido de la pestaña Seguridad.
    </x-kore::tab.item>

    <x-kore::tab.item id="notificaciones" label="Notificaciones">
        Contenido de la pestaña Notificaciones.
    </x-kore::tab.item>
</x-kore::tab>

<x-kore::tab selected="general">
    <x-kore::tab.item id="general" label="General">
        Contenido de la pestaña General.
    </x-kore::tab.item>

    <x-kore::tab.item id="seguridad" label="Seguridad">
        Contenido de la pestaña Seguridad.
    </x-kore::tab.item>

    <x-kore::tab.item id="notificaciones" label="Notificaciones">
        Contenido de la pestaña Notificaciones.
    </x-kore::tab.item>
</x-kore::tab>

Variantes

Tres variantes visuales: line (default), pill y enclosed.

Contenido

{{-- Línea inferior (por defecto) --}}
<x-kore::tab variant="line" selected="tab1">
    <x-kore::tab.item id="tab1" label="Tab 1">Contenido</x-kore::tab.item>
    <x-kore::tab.item id="tab2" label="Tab 2">Contenido</x-kore::tab.item>
</x-kore::tab>

{{-- Píldoras --}}
<x-kore::tab variant="pill" selected="tab3">
    <x-kore::tab.item id="tab3" label="Tab 1">Contenido</x-kore::tab.item>
    <x-kore::tab.item id="tab4" label="Tab 2">Contenido</x-kore::tab.item>
</x-kore::tab>

{{-- Encerrado (tipo card) --}}
<x-kore::tab variant="enclosed" selected="tab5">
    <x-kore::tab.item id="tab5" label="Tab 1">Contenido</x-kore::tab.item>
    <x-kore::tab.item id="tab6" label="Tab 2">Contenido</x-kore::tab.item>
</x-kore::tab>

{{-- Línea inferior (por defecto) --}}
<x-kore::tab variant="line" selected="tab1">
    <x-kore::tab.item id="tab1" label="Tab 1">Contenido</x-kore::tab.item>
    <x-kore::tab.item id="tab2" label="Tab 2">Contenido</x-kore::tab.item>
</x-kore::tab>

{{-- Píldoras --}}
<x-kore::tab variant="pill" selected="tab3">
    <x-kore::tab.item id="tab3" label="Tab 1">Contenido</x-kore::tab.item>
    <x-kore::tab.item id="tab4" label="Tab 2">Contenido</x-kore::tab.item>
</x-kore::tab>

{{-- Encerrado (tipo card) --}}
<x-kore::tab variant="enclosed" selected="tab5">
    <x-kore::tab.item id="tab5" label="Tab 1">Contenido</x-kore::tab.item>
    <x-kore::tab.item id="tab6" label="Tab 2">Contenido</x-kore::tab.item>
</x-kore::tab>

Con iconos y badges

Agrega iconos Lucide y badges numéricos a las pestañas.

Lista de mensajes.

Lista de contactos.

<x-kore::tab selected="mensajes">
    <x-kore::tab.item id="mensajes" label="Mensajes" icon="mail" badge="3">
        Lista de mensajes.
    </x-kore::tab.item>

    <x-kore::tab.item id="contactos" label="Contactos" icon="users">
        Lista de contactos.
    </x-kore::tab.item>
</x-kore::tab>

<x-kore::tab selected="mensajes">
    <x-kore::tab.item id="mensajes" label="Mensajes" icon="mail" badge="3">
        Lista de mensajes.
    </x-kore::tab.item>

    <x-kore::tab.item id="contactos" label="Contactos" icon="users">
        Lista de contactos.
    </x-kore::tab.item>
</x-kore::tab>

Orientación vertical

Las pestañas se muestran en columna a la izquierda del contenido.

Datos del perfil.

Configuración de la cuenta.

<x-kore::tab orientation="vertical" selected="perfil">
    <x-kore::tab.item id="perfil" label="Perfil" icon="user">
        Datos del perfil.
    </x-kore::tab.item>

    <x-kore::tab.item id="cuenta" label="Cuenta" icon="settings">
        Configuración de la cuenta.
    </x-kore::tab.item>
</x-kore::tab>

<x-kore::tab orientation="vertical" selected="perfil">
    <x-kore::tab.item id="perfil" label="Perfil" icon="user">
        Datos del perfil.
    </x-kore::tab.item>

    <x-kore::tab.item id="cuenta" label="Cuenta" icon="settings">
        Configuración de la cuenta.
    </x-kore::tab.item>
</x-kore::tab>

Props

Prop	Tipo	Default	Descripción
`selected`	string\|null	null	ID de la pestaña activa inicial
`variant`	string	line	Variante visual: line, pill, enclosed
`orientation`	string	horizontal	Orientación: horizontal, vertical
`scrollable`	bool	false	Habilita scroll horizontal cuando las pestañas desbordan

Props del item

Props

Prop	Tipo	Default	Descripción
`id`	string	requerido	Identificador único de la pestaña
`label`	string	requerido	Texto de la pestaña
`icon`	string\|null	null	Icono Lucide junto al label
`badge`	string\|null	null	Texto de badge junto al label
`disabled`	bool	false	Desactiva la pestaña
`lazy`	bool	false	Renderiza el contenido solo al activar la pestaña
`closeable`	bool	false	Permite cerrar/remover la pestaña

En esta página

Uso básico Variantes Con iconos y badges Orientación vertical Props