Statut
Component checklist
Usage
<dsa-drawer label="Le Budget">
La politique de soutien à la recherche et à l’innovation de la CNSA est
financée par le fonds « intervention » de son budget. Chaque année, environ 10
millions d’euros lui sont consacrés.
<dsa-button slot="footer">Bouton</dsa-button>
<dsa-button slot="footer" variant="secondary">
Bouton
</dsa-button>
<dsa-button slot="footer" variant="primary">
Bouton
</dsa-button>
</dsa-drawer>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/drawer/drawer.js'
import '@ds-autonomie/web-components/dist/components/button/button.js'
import type { DSADrawer, DSAButton } 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 |
|---|---|---|---|
|
contained |
Par défaut, le tiroir glisse hors de son bloc contenant (généralement la fenêtre). Pour faire glisser le tiroir hors de son élément parent, définissez cet attribut à true et ajoutez position: relative au parent |
boolean |
false |
|
filters |
Mettre à true si le drawer contient des filtres |
boolean |
false |
|
label |
Le libellé affiché dans l'entête du drawer. Vous devez toujours inclure un libellé informatif lorsque vous utilisez no-header, puisqu'il est requis pour une accessibilité adéquate. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
noHeader no-header |
Désactive l'entête. Ceci désactive aussi le bouton par défaut fermer, il est donc important de fournir une manière accessible de fermer la dialog pour les utilisateurs |
boolean |
false |
|
placement |
La direction dans laquelle le drawer va s'ouvrir |
top end bottom start |
end |
|
open
|
Indique si le drawer est affiché ou non. Vous pouvez activer/désactiver cet attribut pour afficher et masquer la boîte de dialogue, ou vous pouvez utilisez les méthodes show() et hide() et cet attribut reflétera l'état ouvert du tiroir |
boolean |
false |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Cache le tiroir |
() => Promise<void> |
|
show() |
Affiche le tiroir |
() => Promise<void> |
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal |
|
footer |
Le pied de page du drawer, habituellement un ou plusieurs boutons représentant des options |
|
header-actions |
Actions optionnels à ajouter a l'entête. Fonctionne mieux avec dsa-icon-button |
|
label |
Le slot du libellé du drawer. Alternativement, vous pouvez utiliser l'attribut label |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis lorsque le tiroir se cache et toute les animations sont complétées |
|
dsa-after-show |
Émis lorsque le tiroir est ouverte et toutes animations sont complétées |
|
dsa-hide |
Émis lorsque le bouton fermer est activé |
|
dsa-initial-focus |
Émis lorsque le tiroir s'affiche et est prête à recevoir le focus. Appeler event.preventDefault() empêchera le focus et vous permettra de le définir sur un élément différent, tel qu'une entrée |
|
dsa-request-close |
{{ source: 'close-button' | 'keyboard' | 'overlay' }}Émis lorsque l'utilisateur tente de fermer le tiroir en appuyant le bouton fermer, en cliquant le overlay ou la touche échapper. Appeler event.preventDefault() gardera le tiroir ouvert. Évitez de l'utiliser à moins que la fermeture du tiroir n'entraîne un comportement destructeur tel qu'une perte de données |
|
dsa-show |
Émis lorsque le drawer est affichée |