Onglets

Composant de navigation par onglets : supporte le mode contrôlé / non contrôlé, deux apparences (carte / ligne), la fermeture et l'ajout d'onglets, ainsi qu'une navigation clavier complète.

Utilisation de base

Utilisation de base

L'encre s'estompe, l'esprit vibre.

Couleurs danqing, or et jade resplendissants.

Les espaces vides sont pleins de sens (désactivé).

Pinceau fin, chaque détail visible.

Expression libre, sans contrainte de forme.

import { useState } from 'react'
import { LhTabs, LhTabPane } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhTabs value={value} onChange={(name) => setValue(name)}>
      <LhTabPane name="ink" label="Encre">
        Lavis d'encre, vivace et fluide.
      </LhTabPane>
      <LhTabPane name="danqing" label="Danqing">
        Couleurs du danqing, éclat d'or et de vert.
      </LhTabPane>
    </LhTabs>
  )
}

Tabs Props

Prop	Description	Type	Options	Valeur par défaut
value	Nom de l'onglet actif (contrôlé)	string	—	—
defaultValue	Nom de l'onglet actif (valeur par défaut non contrôlée)	string	—	—
type	Apparence	'line' | 'card'	—	'line'
closable	Onglets fermables	boolean	—	false
addable	Afficher le bouton d'ajout	boolean	—	false
tabPosition	Position des onglets	'top' | 'bottom'	—	'top'
sx	Raccourci de mise en page	SxProps	—	—

TabPane Props

Prop	Description	Type	Valeur par défaut
name	Identifiant unique de l'onglet (clé stable, sa modification dynamique est déconseillée)	string	—
label	Titre de l'onglet	ReactNode	—
disabled	Désactivé	boolean	false
children	Contenu de l'onglet	ReactNode	—

Événements de Tabs

Événement	Description	Signature du callback	Équivalent Vue
onChange	Déclenché au changement d'onglet actif	(name: string) => void	@change
onRemove	Déclenché à la fermeture d'un onglet (la visibilité de l'onglet est laissée à la logique applicative)	(name: string) => void	@remove
onAdd	Déclenché au clic sur le bouton d'ajout	() => void	@add

Contrôlé / non contrôlé

Passer value rend le composant contrôlé, passer defaultValue s'appuie sur un état interne non contrôlé. onChange se déclenche dans les deux modes. À la fermeture de l'onglet actif, le mode non contrôlé bascule automatiquement sur l'onglet voisin disponible (aligné sur getNameAfterRemove de lh-ui-plus) ; en mode contrôlé, c'est à la logique applicative de le traiter dans onRemove.

Contrainte sur les enfants

children doit être directement composé de LhTabPane (un rendu via .map est possible, tout comme un aplatissement via Fragment, mais aucune encapsulation par un composant personnalisé) — le composant parent collecte les enregistrements d'onglets en descendant via Children.forEach, et une encapsulation personnalisée ferait échouer la collecte.

Interaction clavier

Conforme au modèle d'onglets APG : lorsque le focus est sur un bouton d'onglet, ArrowRight / ArrowLeft (ArrowDown / ArrowUp en orientation verticale) déplace le focus entre les onglets disponibles et les active, en sautant les onglets désactivés ; Home / End saute au premier / dernier ; Delete / Backspace ferme l'onglet courant (requiert closable). Seul l'onglet actif a tabindex=0, les autres -1 (roving tabindex).

Accessibilité

La barre d'onglets est role="tablist", les onglets role="tab" avec aria-selected / aria-controls, les panneaux role="tabpanel" avec aria-labelledby ; les id sont générés par useId(), stables en SSR. Les panneaux inactifs sont sortis de l'arbre d'accessibilité via l'attribut hidden.

ref

forwardRef<HTMLDivElement> — l'élément racine. LhTabPane transmet HTMLDivElement.

Styles

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/tabs'