Statut
Component checklist
Usage
Le sommaire dsa-table-of-contents permet la navigation au sein d'une page. Il accepte pour enfants des éléments d'ancre a.
Afin d'indiquer la section courante à l'utilisateur, il faut ajouter à l'élément a un attribut aria-current="true".
<dsa-table-of-contents>
<a href="#" aria-current="true">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</dsa-table-of-contents>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/table-of-contents/table-of-contents.js';
import type { DSATableOfContents } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser l'accordéon
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
label |
Le libéllé à afficher dans l’en-tête. Si vous avez besoin d'afficher du HTML, utilisez plutôt le slot label |
string |
- |
|
mobile |
Affiche le sommaire en mode mobile |
boolean |
false |
|
open |
En mode mobile, indique si le sommaire est ouvert ou non. Vous pouvez activer/désactiver cet attribut pour afficher et masquer le contenu, ou vous pouvez utiliser les méthodes show() et hide() et cet attribut reflétera l'état ouvert du sommaire |
boolean |
false |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
En mode mobile, cache le contenu du sommaire |
() => Promise<void> |
|
show() |
En mode mobile, affiche le contenu du sommaire |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Des éléments d'ancre a |
|
label |
Le libellé du sommaire. Alternativement, vous pouvez utiliser la propriété label |
Événements
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis lorsque lorsque le sommaire est fermé et que toutes les animations sont complétées, en mode mobile |
|
dsa-after-show |
Émis lorsque le sommaire est ouvert et que toutes les animations sont complétées, en mode mobile |
|
dsa-hide |
Émis lorsque le sommaire est fermé, en mode mobile |
|
dsa-show |
Émis lorsque le sommaire est ouvert, en mode mobile |