Sidenav info accordion - Accordéon d'information de la Navigation latérale

Composant permettant d'ajouter un accordéon d'information dans la navigation latérale

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.19.0

Disponible depuis la version

2.9.0

Usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-sidenav>
                                                                                                                                                          <dsa-sidenav-info-accordion summary="BLANC Michel">
                                                                                                                                                            <span slot="collapsed-summary">BM</span>
                                                                                                                                                            <div>
                                                                                                                                                              Some content
                                                                                                                                                            </div>
                                                                                                                                                          </dsa-sidenav-info-accordion>
                                                                                                                                                        </dsa-sidenav>
                                                                                                                                                        
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/sidenav/sidenav.js';
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/sidenav-info-accordion/sidenav-info-accordion.js';
                                                                                                                                                          import type { DSASidenav, DSASidenavInfoAccordion } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant bouton filtre


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

open

Indique si l'accordéon est ouvert ou non. Vous pouvez activer/désactiver cet attribut pour afficher et masquer 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

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 due l’accordion

() => void

click()

Simule un click sur le bouton

() => void

focus()

Met le focus sur le bouton de l’accordion

(options?: FocusOptions) => void

Slots

Nom

Description

(defaut)

Le contenu principal

collapsed-summary

Contenu du bouton en mode collapsed

summary

Le résumé de l'accordéon. Alternativement, vous pouvez utiliser la propriété summary

É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-collapse

Émis lorsque l'accordéon est ouvert

 


Références

Voici la liste des références vers les composants liés :