Tabs

Barra de pestanas responsive que renderiza una lista de ítems como un <ul> con scroll horizontal. En escritorio, aparecen botones de navegación izquierda y derecha cuando el contenido desborda (controlado por showNavigationButtons). Las pestanas admiten íconos mediante nombres de ícono o rutas SVG personalizadas. La pestana activa se rastrea internamente a menos que se controle mediante defaultActiveTab y onTabChange.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | tabs | TabItem[] | Sí | — | Arreglo de definiciones de pestanas. Cada ítem tiene name (identificador), label (texto visible), y opcionalmente icon e iconPaths. | | containerStyle | React.CSSProperties | No | — | Estilos en línea para el elemento contenedor exterior. | | id | string | No | — | id HTML del elemento contenedor. | | defaultActiveTab | string | No | — | name de la pestana que debe estar activa en el renderizado inicial. Por defecto la primera pestana. | | onTabChange | (activeTab: string) => void | No | — | Se llama cuando cambia la pestana activa. Recibe el name de la pestana recién activa. | | color | string | No | 'primary' | Clave de color del tema o valor CSS usado para íconos. | | renderTab | (tab: TabItem, isActive: boolean) => React.ReactNode | No | — | Renderer personalizado para cada pestana. Cuando se proporciona, reemplaza la apariencia predeterminada. | | tabStyle | React.CSSProperties | No | — | Estilos en línea para el <span> interior de cada pestana. | | activeTabStyle | React.CSSProperties | No | — | Estilos en línea adicionales para el <span> interior de la pestana activa. | | tabListStyle | React.CSSProperties | No | — | Estilos en línea para el <ul> de la lista de pestanas. | | showNavigationButtons | boolean | No | true | Cuando es true, muestra botones de scroll izquierda/derecha en pantallas no móviles. |

Estructura de TabItem

| Campo | Tipo | Requerido | Descripción | |-------|------|----------|-------------| | name | string | Sí | Identificador único de la pestana (camelCase). | | label | string | Sí | Etiqueta visible al usuario. | | icon | string | No | Nombre del ícono a renderizar antes de la etiqueta. | | iconPaths | any[] | No | Datos de ruta SVG personalizados para un ícono dinámico. |

Uso

Básico

import React from 'react';
import Tabs from '@/components/tabs/Tabs';

const tabs = [
  { name: 'overview', label: 'Overview' },
  { name: 'details', label: 'Details' },
  { name: 'history', label: 'History' },
];

export default function Example() {
  const [activeTab, setActiveTab] = React.useState('overview');

  return (
    <Tabs
      tabs={tabs}
      defaultActiveTab={activeTab}
      onTabChange={setActiveTab}
    />
  );
}

Con íconos y estilos personalizados

<Tabs
  tabs={[
    { name: 'products', label: 'Products', icon: 'package' },
    { name: 'orders', label: 'Orders', icon: 'cart' },
  ]}
  color="primary"
  onTabChange={(name) => console.log('Active:', name)}
  tabStyle={{ borderRadius: 8 }}
  activeTabStyle={{ fontWeight: 'bold' }}
/>