Sur cette page
Tab
AlphaNomme et active un panneau individuel dans un groupe d'onglets.
Ce composant doit être utilisé en tant qu'enfant de <ar-tab-group>.
Merci de voir la documentation du composant ar-tab-group pour voir les exemples d'utilisation.
Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.
Importez ce composant depuis le CDN.
<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/tab/index.js"></script>Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :
import '@ariane-ui/core/dist/components/tab/index.js';Attributs et propriétés
Nom du ar-tab-panel associé. Requis.
Désactive l'onglet — non sélectionnable, ignoré au clavier.
Vrai quand l'onglet est actif (sélectionné).
Slots
Libellé de l'onglet.
CSS Parts
Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.
Certaines parts portent un modificateur d'état (--) — voir Personnalisation avancée.
Racine du composant.
Wrapper du slot quand l'onglet est actif (variante d'état de `tab`, propriété `active` pilotée par ar-tab-group).
CSS Custom States
Utilisez le sélecteur :state(name) sur le tag pour styler ce composant en fonction de son état.
Composable avec ::part() pour cibler un élément interne (ar-tab:state(name)::part(x)).
Sous Chrome et Edge 125, l'état est exposé avec le préfixe -- (:--name) : voir Compatibilité.
L'onglet est désactivé.
L'onglet est actif (sélectionné).
CSS Custom Properties
Padding horizontal.
Padding vertical.
box-shadow complet sur part="tab--selected" quand actif. Repli `inset 0 -2px 0 Highlight` si aucun thème n'est chargé — sans lui, l'onglet actif est visuellement indiscernable des autres.
Décalage de la bague de focus. Valeur négative = inset (non coupée par le conteneur overflow du tab-group). Repli `-2px` si aucun thème n'est chargé — sans lui, l'anneau de focus peut être rogné par le conteneur `overflow-x: auto` du tab-group. Surcharge le token global --ar-focus-ring-offset pour ce composant.
Couleur de la bague de focus de l'onglet (cascade vers --ar-focus-ring-color). Repli `ButtonText` si aucun thème n'est chargé (WCAG 2.4.7).