Tabs

Organiza el contenido en vistas separadas donde solo una es visible a la vez.

Importación

import { Tabs } from 'asterui'

Ejemplos

Uso Básico

Pestañas simples con cambio de contenido automático.

Content of Tab 1

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs>
        <Tabs.Panel tab="Tab 1" key="1">
          <Typography.Text>Content of Tab 1</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 2" key="2">
          <Typography.Text>Content of Tab 2</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 3" key="3">
          <Typography.Text>Content of Tab 3</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Página de Configuración

Página de configuración completa con formularios usando inputs con etiqueta flotante.

import { Tabs, Space, Input, Button } from 'asterui'

function App() {
  return (
      <Tabs defaultActiveKey="account" variant="border">
        <Tabs.Panel tab="Account" key="account">
          <Space direction="vertical" size="md">
            <Input floatingLabel="Username" placeholder="john_doe" />
            <Input floatingLabel="Email" type="email" placeholder="john@example.com" />
            <Button color="primary">Save</Button>
          </Space>
        </Tabs.Panel>
        <Tabs.Panel tab="Security" key="security">
          <Space direction="vertical" size="md">
            <Input floatingLabel="Current Password" type="password" />
            <Input floatingLabel="New Password" type="password" />
            <Button color="primary">Update</Button>
          </Space>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Variante Enmarcada

Pestañas con estilo de caja cerrada.

Home content

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs variant="box">
        <Tabs.Panel tab="Home" key="home">
          <Typography.Text>Home content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Profile" key="profile">
          <Typography.Text>Profile content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Settings" key="settings">
          <Typography.Text>Settings content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Variante Elevada

Pestañas con apariencia elevada 3D.

Overview content

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs variant="lift">
        <Tabs.Panel tab="Overview" key="1">
          <Typography.Text>Overview content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Reports" key="2">
          <Typography.Text>Reports content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Analytics" key="3">
          <Typography.Text>Analytics content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Diferentes Tamaños

Pestañas en varios tamaños usando los componentes Space y Typography.

Small

Small tabs content

Large

Large tabs content

import { Tabs, Space, Typography } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <div>
          <Typography.Text strong>Small</Typography.Text>
          <Tabs size="sm">
            <Tabs.Panel tab="Tab 1" key="1"><Typography.Text>Small tabs content</Typography.Text></Tabs.Panel>
            <Tabs.Panel tab="Tab 2" key="2"><Typography.Text>Content 2</Typography.Text></Tabs.Panel>
          </Tabs>
        </div>
        <div>
          <Typography.Text strong>Large</Typography.Text>
          <Tabs size="lg">
            <Tabs.Panel tab="Tab 1" key="1"><Typography.Text>Large tabs content</Typography.Text></Tabs.Panel>
            <Tabs.Panel tab="Tab 2" key="2"><Typography.Text>Content 2</Typography.Text></Tabs.Panel>
          </Tabs>
        </div>
      </Space>
    )
}

export default App

Pestaña Deshabilitada

Deshabilita pestañas específicas.

Active content

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs>
        <Tabs.Panel tab="Active" key="1">
          <Typography.Text>Active content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Disabled" key="2" disabled>
          <Typography.Text>Cannot see this</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Also Active" key="3">
          <Typography.Text>Active content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

Patrón Basado en Datos

Usa la prop items para pestañas basadas en datos con iconos.

Home content

import { Tabs, notification, Typography } from 'asterui'
import { HomeIcon, UserIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [activeKey, setActiveKey] = useState('home')
  
  const items = [
    { key: 'home', label: 'Home', icon: <HomeIcon size="sm" />, children: <Typography.Text>Home content</Typography.Text> },
    { key: 'profile', label: 'Profile', icon: <UserIcon size="sm" />, children: <Typography.Text>Profile content</Typography.Text> },
    { key: 'settings', label: 'Settings', icon: <Cog6ToothIcon size="sm" />, children: <Typography.Text>Settings content</Typography.Text> },
  ]
  
  return (
      <Tabs
        items={items}
        activeKey={activeKey}
        onChange={(key) => {
          setActiveKey(key)
          notification.info({ message: `Switched to ${key}` })
        }}
        variant="border"
      />
    )
}

export default App

Posición Inferior

Pestañas posicionadas debajo del contenido.

Content appears above the tabs

import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs position="bottom" variant="border">
        <Tabs.Panel tab="Tab 1" key="1">
          <Typography.Text>Content appears above the tabs</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 2" key="2">
          <Typography.Text>Second tab content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 3" key="3">
          <Typography.Text>Third tab content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

API

`Tabs`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Paneles de pestañas (patrón compuesto)	`React.ReactNode`	`-`
`items`	Elementos de pestaña (patrón basado en datos)	`TabItem[]`	`-`
`activeKey`	Clave de pestaña activa actual (controlado)	`string`	`-`
`defaultActiveKey`	Clave de pestaña activa predeterminada (no controlado)	`string`	`-`
`onChange`	Callback cuando cambia la pestaña	`(key: string) => void`	`-`
`variant`	Variante de estilo visual	`'box' \| 'border' \| 'lift'`	`-`
`size`	Tamaño de pestaña	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`-`
`position`	Posición de pestaña relativa al contenido	`'top' \| 'bottom'`	`'top'`
`className`	Clases CSS adicionales	`string`	`-`

`TabItem` (para prop items)

Propiedad	Descripción	Tipo	Predeterminado
`key`	Identificador único	`string`	`-`
`label`	Etiqueta del botón de pestaña	`React.ReactNode`	`-`
`children`	Contenido del panel de pestaña	`React.ReactNode`	`-`
`disabled`	Deshabilitar la pestaña	`boolean`	`false`
`icon`	Icono de pestaña	`React.ReactNode`	`-`

`Tabs.Panel` (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
`key`	Identificador único para la pestaña (prop key de React)	`string`	`-`
`tab`	Etiqueta del botón de pestaña	`React.ReactNode`	`-`
`disabled`	Deshabilitar la pestaña	`boolean`	`false`
`icon`	Icono de pestaña	`React.ReactNode`	`-`
`children`	Contenido del panel de pestaña	`React.ReactNode`	`-`

Accesibilidad

Usa roles ARIA adecuados: tablist, tab y tabpanel
Navegación por teclado: Las teclas de flecha se mueven entre pestañas, la tecla Tab mueve el foco al panel
La pestaña activa se indica con aria-selected="true"
Las pestañas deshabilitadas usan aria-disabled para comunicación adecuada
Los paneles de pestañas usan aria-labelledby para asociarse con su pestaña

Consejos de Uso

Usa activeKey para pestañas controladas, defaultActiveKey para no controladas
Usa la prop items para pestañas basadas en datos, Tabs.Panel para patrón compuesto
Usa position="bottom" para colocar las pestañas debajo del contenido

Tabs

Importación

Ejemplos

Uso Básico

Página de Configuración

Variante Enmarcada

Variante Elevada

Diferentes Tamaños

Pestaña Deshabilitada

Patrón Basado en Datos

Posición Inferior

API

Tabs

TabItem (para prop items)

Tabs.Panel (patrón compuesto)

Accesibilidad

Consejos de Uso

`Tabs`

`TabItem` (para prop items)

`Tabs.Panel` (patrón compuesto)