Statut
Component checklist
Usage
<dsa-menu-accordion>
<dsa-menu-navigation>
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</dsa-menu-navigation>
</dsa-menu-accordion>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/menu-accordion/menu-accordion.js';
import '@ds-autonomie/web-components/dist/components/menu-navigation/menu-navigation.js';
import type { DSAMenuAccordion, DSAMenuNavigation } from '@ds-autonomie/web-components';
</script>
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
level |
Le niveau du menu accordéon. |
1 | 2 |
1 |
|
open |
Indique si l'accordéon est ouvert ou non. Vous pouvez activer/désactiver cet attribut pour plier et déplier l'accordéon, ou vous pouvez utiliser les méthodes show() et hide() et cet attribut reflétera l'état ouvert de l'accordéon |
boolean |
false |
|
size |
La taille du menu-item |
'small' | 'medium' | 'large' |
‘medium’ |
|
summary |
Le résumé à afficher dans l’en-tête. Si vous avez besoin d'afficher du HTML, utilisez plutôt le slot summary |
string |
'' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Cache le contenu de l’accordéon |
() => Promise<void> |
|
show() |
Affiche le contenu de l’accordéon |
() => Promise<void> |
|
blur() |
Enlève le focus du bouton du menu-accordion |
() => void |
|
click() |
Simule un click sur le bouton |
() => void |
|
focus() |
Met le focus sur le bouton du menu-accordion |
(options?: FocusOptions) => void |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal (un dsa-menu ou dsa-menu-navigation) |
|
prefix |
Le préfixe du résumé (le plus souvent un dsa-icon). Sans préfixe le menu accordéon ne sera pas affiché dans un dsa-sidenav en mode collapsed |
|
summary |
Le résumé de l’accordéon. Alternativement, vous pouvez utiliser la propriété summary |
|
badge |
Un badge s'affichant à côté du résumé |
Événements
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis lorsque lorsque l'accordéon est fermé et que toutes les animations sont complétées |
|
dsa-after-show |
Émis lorsque l'accordéon est ouvert et que toutes les animations sont complétées |
|
dsa-hide |
Émis lorsque l'accordéon est fermé |
|
dsa-show |
Émis lorsque l'accordéon est ouvert |
Références
Voici la liste des références vers les composants liés :