Onglets

Organiser le contenu dans des vues séparées où une seule est visible à la fois.

Importation

import { Tabs } from 'asterui'

Exemples

Utilisation de base

Onglets simples avec changement de contenu géré automatiquement.

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

Page de paramètres

Page de paramètres complète avec formulaires utilisant des inputs à label flottant.

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 encadrée

Onglets avec style de boîte encadrée.

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 surélevée

Onglets avec apparence 3D surélevée.

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

Différentes tailles

Onglets en différentes tailles utilisant les composants Space et 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

Onglet désactivé

Désactiver des onglets spécifiques.

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

Modèle piloté par les données

Utiliser la propriété items pour des onglets pilotés par les données avec icônes.

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

Position en bas

Onglets positionnés sous le contenu.

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`

Propriété	Description	Type	Défaut
`children`	Panneaux d’onglets (modèle composé)	`React.ReactNode`	`-`
`items`	Éléments d’onglets (modèle piloté par les données)	`TabItem[]`	`-`
`activeKey`	Clé de l’onglet actif actuel (contrôlé)	`string`	`-`
`defaultActiveKey`	Clé de l’onglet actif par défaut (non contrôlé)	`string`	`-`
`onChange`	Callback lorsque l’onglet change	`(key: string) => void`	`-`
`variant`	Variante de style visuel	`'box' \| 'border' \| 'lift'`	`-`
`size`	Taille de l’onglet	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`-`
`position`	Position de l’onglet par rapport au contenu	`'top' \| 'bottom'`	`'top'`
`className`	Classes CSS supplémentaires	`string`	`-`

`TabItem` (pour la propriété items)

Propriété	Description	Type	Défaut
`key`	Identifiant unique	`string`	`-`
`label`	Label du bouton d’onglet	`React.ReactNode`	`-`
`children`	Contenu du panneau d’onglet	`React.ReactNode`	`-`
`disabled`	Désactiver l’onglet	`boolean`	`false`
`icon`	Icône de l’onglet	`React.ReactNode`	`-`

`Tabs.Panel` (modèle composé)

Propriété	Description	Type	Défaut
`key`	Identifiant unique pour l’onglet (propriété key de React)	`string`	`-`
`tab`	Label du bouton d’onglet	`React.ReactNode`	`-`
`disabled`	Désactiver l’onglet	`boolean`	`false`
`icon`	Icône de l’onglet	`React.ReactNode`	`-`
`children`	Contenu du panneau d’onglet	`React.ReactNode`	`-`

Accessibilité

Utilise les rôles ARIA appropriés : tablist, tab et tabpanel
Navigation au clavier : les touches fléchées déplacent entre les onglets, la touche Tab déplace le focus dans le panneau
L’onglet actif est indiqué avec aria-selected="true"
Les onglets désactivés utilisent aria-disabled pour une communication appropriée
Les panneaux d’onglets utilisent aria-labelledby pour s’associer à leur onglet

Conseils d’utilisation

Utilisez activeKey pour les onglets contrôlés, defaultActiveKey pour les non contrôlés
Utilisez la propriété items pour les onglets pilotés par les données, Tabs.Panel pour le modèle composé
Utilisez position="bottom" pour placer les onglets sous le contenu