Statut
-
Component checklist
Usage
<dsa-sidenav aria-label="Navigation latérale">
<dsa-menu-label id="nav-label">Accès rapide</dsa-menu-label>
<dsa-menu-navigation aria-labelledby="nav-label">
<dsa-menu-item href="#" type="link">
<dsa-icon name="more" slot="prefix"></dsa-icon>
Avancement du dossier
</dsa-menu-item>
<dsa-menu-item type="button">
<dsa-icon
name="published_with_changes"
slot="prefix"
></dsa-icon>
Droits et prestations</dsa-menu-item>
<dsa-menu-item href="#" type="link" current="page">
<dsa-icon name="topic" slot="prefix"></dsa-icon>
Demandes exprimées (current)
</dsa-menu-item>
</dsa-menu-navigation>
<dsa-divider></dsa-divider>
<dsa-menu-accordion summary="Menu accordion">
<dsa-menu-navigation>
<dsa-menu-item type="link" href="#" size="small">
<dsa-icon slot="prefix" name="home_work"></dsa-icon>
Lien 1
</dsa-menu-item>
<dsa-menu-item type="link" href="#" size="small">
<dsa-icon slot="prefix" name="school"></dsa-icon>
Lien 2
</dsa-menu-item>
<dsa-menu-item type="link" href="#" size="small">
<dsa-icon slot="prefix" name="work_outline"></dsa-icon>
Lien 3
</dsa-menu-item>
<dsa-menu-item type="link" href="#" size="small">
<dsa-icon
slot="prefix"
name="medical_services"
></dsa-icon>
Lien 4
</dsa-menu-item>
</dsa-menu-navigation>
</dsa-menu-accordion>
<dsa-menu-navigation slot="bottom">
<dsa-menu-item href="#" type="link">
<dsa-icon name="manage_accounts" slot="prefix"></dsa-icon>
Outils
</dsa-menu-item>
<dsa-menu-item href="#" type="link"
><dsa-icon name="settings" slot="prefix"></dsa-icon
>Préférences</dsa-menu-item
>
</dsa-menu-navigation>
</dsa-sidenav>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/sidenav/sidenav.js';
import '@ds-autonomie/web-components/dist/components/menu-label/menu-label.js';
import '@ds-autonomie/web-components/dist/components/menu-navigation/menu-navigation.js';
import '@ds-autonomie/web-components/dist/components/menu-accordion/menu-accordion.js';
import '@ds-autonomie/web-components/dist/components/menu-item/menu-item.js';
import '@ds-autonomie/web-components/dist/components/icon/icon.js';
import type { DSASidenav, DSAMenuAccordion, DSAMenuNavigation, DSAMenuItem, DSAIcon } 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 |
|---|---|---|---|
|
allowShortcut allow-shortcut |
Permet de contrôler l'affichage de la sidenav à l'aide du raccourci (Mac: Cmd + \ ; autre : Ctrl + \) |
boolean |
false |
|
collapsed |
Replie la Sidenav |
boolean |
false |
|
navLabel nav-label |
Modifie le libellé de l'élément <nav> |
string |
‘‘ |
Slots
|
Nom |
Description |
|---|---|
|
(defaut) |
Le contenu qui sera affiché dans la partie supérieure (sidenav-info-accordion, menu-navigation, menu-accordion, divider, menu-label) |
|
bottom |
Le contenu qui sera affiché dans la partie inférieure (menu-navigation, menu-accordion, divider, menu-label) |
Customisation
Vous pouvez modifier la variables css suivante au niveau du `dsa-sidenav` afin d'outrepasser les valeurs par défut du DSA :
- --sidenav-expanded-width
Références
Voici la liste des références vers les composants liés :