NavigationTabs

Barra de navegación inferior fija que usa Link y matchPath de React Router para determinar qué pestana está activa según la URL actual. Se renderiza mediante un Portal, por lo que se posiciona en la parte inferior del viewport independientemente del anidamiento en el DOM. Cada pestana admite un ícono opcional y una función renderTab personalizada.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | tabs | Tab[] | Sí | — | Arreglo de definiciones de pestanas. Cada pestana tiene id, label, link, y opcionalmente icon y campos adicionales. | | renderTab | (tab: Tab, isActive: boolean) => React.ReactNode | No | — | Renderer personalizado para cada ítem de pestana. Recibe el objeto de pestana y si está activa. | | wrapperStyle | React.CSSProperties | No | — | Estilos en línea para el contenedor exterior de posición fija. | | containerStyle | React.CSSProperties | No | — | Estilos en línea para el contenedor interior (la barra en forma de píldora). | | tabStyle | React.CSSProperties | No | — | Estilos en línea para cada elemento <Link> de pestana. | | activeTabStyle | React.CSSProperties | No | — | Estilos en línea adicionales para el <Link> de la pestana activa. |

Estructura de Tab

| Campo | Tipo | Requerido | Descripción | |-------|------|----------|-------------| | id | string | Sí | Identificador único de la pestana. | | label | string | Sí | Etiqueta visible al usuario. | | link | string | Sí | Ruta a la que navega esta pestana. El estado activo se compara con la URL actual. | | icon | string | No | Nombre del ícono mostrado encima de la etiqueta. | | [key: string] | any | No | Campos adicionales que se pasan y están disponibles en renderTab. |

Uso

Básico

import NavigationTabs from '@/components/tabs/NavigationTabs';

const tabs = [
  { id: 'home', label: 'Home', link: '/home', icon: 'home' },
  { id: 'orders', label: 'Orders', link: '/orders', icon: 'cart' },
  { id: 'profile', label: 'Profile', link: '/profile', icon: 'person' },
];

export default function Layout() {
  return (
    <>
      {/* page content */}
      <NavigationTabs tabs={tabs} />
    </>
  );
}

Con renderer personalizado

<NavigationTabs
  tabs={tabs}
  renderTab={(tab, isActive) => (
    <span style={{ color: isActive ? '#6C3BD1' : '#999' }}>
      {tab.label}
    </span>
  )}
/>