StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Tabs } from "stofli-ui";

Cargando...

Muestra un componente de pestañas básico.

Cargando...

Añade íconos a las pestañas.

Cargando...

Usando hoverEffect={true} para mostrar una animación al pasar el ratón por encima de las pestañas.

Cargando...

Usando la prop variant: default, primary, secondary, success, warning y danger.

Cargando...

Usando la prop size: sm, md y lg.

Cargando...

Usando la prop radius: none, sm, md y full.

Cargando...

Usando la prop fullWidth para expandir las pestañas al ancho completo del contenedor.

Cargando...

Puedes personalizar cualquier parte del componente usando las propiedades de clases personalizadas con Tailwind CSS.

Cargando...

Un ejemplo de diseño de pestañas con estilo moderno y minimalista.

Cargando...

Prop	Tipo	Default	Descripción
`tabs`	`Array<{ label: string, content: ReactNode, icon?: ReactNode }>`	-	Lista de pestañas con su contenido
`defaultTab`	`number`	`0`	Índice de la pestaña activa por defecto
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"`	`"default"`	Variante de estilo
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tamaño de las pestañas
`radius`	`"none" \| "sm" \| "md" \| "full"`	`"md"`	Radio de las esquinas
`fullWidth`	`boolean`	`false`	Si las pestañas ocupan todo el ancho disponible
`hoverEffect`	`boolean`	`false`	Activa el efecto de hover en las pestañas
`ariaLabel`	`string`	`"Pestañas"`	Etiqueta ARIA para el componente
`id`	`string`	-	ID personalizado para el componente
`className`	`string`	-	Clases adicionales para el contenedor principal
`tabClassName`	`string`	-	Clases adicionales para cada pestaña
`contentClassName`	`string`	-	Clases adicionales para el contenido
`containerClassName`	`string`	-	Clases para personalizar el contenedor principal
`tabsContainerClassName`	`string`	-	Clases para el contenedor de las pestañas
`scrollContainerClassName`	`string`	-	Clases para el contenedor de scroll horizontal
`indicatorClassName`	`string`	-	Clases para el indicador de pestaña activa
`activeTabClassName`	`string`	-	Clases adicionales para la pestaña activa
`tabIconClassName`	`string`	-	Clases para los iconos de las pestañas
`tabLabelClassName`	`string`	-	Clases para las etiquetas de texto de las pestañas
`contentContainerClassName`	`string`	-	Clases para el contenedor del contenido de pestañas

Tabs