Tabs

Pestañas con scroll horizontal, flechas de navegación y cierre individual.

Tabs

Demo

Contenido de la pestaña General.

<Tabs defaultValue="tab1">
  <TabsList>
    <Tab value="tab1">General</Tab>
    <Tab value="tab2">Avanzado</Tab>
    <Tab value="tab3">Logs</Tab>
  </TabsList>
  <TabPanel value="tab1">Contenido</TabPanel>
  <TabPanel value="tab2">Contenido</TabPanel>
  <TabPanel value="tab3">Contenido</TabPanel>
</Tabs>

Demo interactiva

Agrega, quita y cierra pestañas en vivo. Esta demo monta el subsistema completo (<Tabs> + <TabsList> + <Tab> + <TabPanel>) — patrón faithful para provide/inject.

Props

defaultValue (Tabs)

Valor inicial de la pestaña activa.

Prop	Tipo	Default	Descripción
defaultValue	string	'0'	Valor inicial de la pestaña activa

value (Tab)

Identificador único de la pestaña. Requerido.

<Tab value="tab1">General</Tab>

closable (Tab)

Muestra botón de cierre (×) en la pestaña.

README

<Tabs defaultValue="a">
  <TabsList>
    <Tab value="a" closable>README.md</Tab>
    <Tab value="b" closable>main.ts</Tab>
    <Tab value="c">package.json</Tab>
  </TabsList>
  <TabPanel value="a">README</TabPanel>
  <TabPanel value="b">main</TabPanel>
  <TabPanel value="c">package</TabPanel>
</Tabs>

color (Tab)

Color del indicador de pestaña activa.

Contenido éxito

<Tabs defaultValue="a">
  <TabsList>
    <Tab value="a" color="success">Éxito</Tab>
    <Tab value="b" color="danger">Peligro</Tab>
    <Tab value="c" color="warning">Advertencia</Tab>
  </TabsList>
  <TabPanel value="a">Contenido éxito</TabPanel>
  <TabPanel value="b">Contenido peligro</TabPanel>
  <TabPanel value="c">Contenido advertencia</TabPanel>
</Tabs>

API

TabPanel

Prop	Tipo	Default	Descripción
value	string	—	Valor que vincula al Tab

Tokens usados

--font-mono, --bg, --border, --text, --color-*