Statut
Component checklist
Usage
<dsa-tab-group activation="auto">
<dsa-tab slot="nav" panel="1">
Étape 1
</dsa-tab>
<dsa-tab slot="nav" panel="2">
Étape 2
</dsa-tab>
<dsa-tab slot="nav" panel="3">
Étape 3
</dsa-tab>
<dsa-tab-panel name="1" tabindex="0">
Description de la première étape sans contenu focusable.
</dsa-tab-panel>
<dsa-tab-panel name="2">
Description de la deuxième étape avec du contenu focusable
<dsa-button>Focus moi</dsa-button>
</dsa-tab-panel>
<dsa-tab-panel name="3" active="" tabindex="0">
Description de la troisième étape sans contenu focusable
</dsa-tab-panel>
</dsa-tab-group>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/tab/tab.js';
import '@ds-autonomie/web-components/dist/components/tab-panel/tab-panel.js';
import '@ds-autonomie/web-components/dist/components/tab-group/tab-group.js';
import type { DSATab, DSATabPanel, DSATabGroup } from '@ds-autonomie/web-components';
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un nom accessible au groupe d'onglets. |
string |
- |
|
activation |
Lorsqu'il est défini sur automatique, la navigation dans les onglets avec les touches fléchées affichera instantanément le panneau de l'onglet correspondant. Lorsqu'il est défini sur manuel, l'onglet recevra le focus mais ne s'affichera pas tant que l'utilisateur n'appuiera pas sur la barre d'espace ou sur Entrée |
auto manual |
'auto' |
|
belowPageHeader below-page-header |
Indique si le groupde d'onglet est positionné sous une en-tête de page. Lui donne la même couleur de fond le cas échéant. |
boolean |
false |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
|
Nom |
Description |
Type |
|---|---|---|
|
show() |
Affiche le panneau de l'onglet spécifié |
(panel: string) => void |
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Utilisé pour regrouper les panneaux aux onglets dans le groupe d'onglets. Doivent être des éléments <dsa-tab-panel> |
|
nav |
Utilisé pour regrouper les onglets dans le groupe d'onglets. Doivent être des éléments <dsa-tab> |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-tab-hide |
{{ name: String }} Émis lorsqu'un onglet est masqué |
|
dsa-tab-show |
{{ name: String }} Émis lorsqu'un onglet est affiché |
Personnalisation
Vous pouvez modifier les variables css suivantes au niveau du dsa-tab-group afin d'outrepasser les valeurs par défaut du DSA :
- --tab-group-max-width
- --tab-group-padding-inline