Status
The component has a health status indicated
Component checklist
Usage
Exemples d'intégration de l'accordéon sur différents framework:
<dsa-dialog classname="dialog-overview" label="Dialog">
Un « cookie » est une suite d'informations, généralement de petite taille et
identifié par un nom, qui peut être transmis à votre navigateur par un site
web sur lequel vous vous connectez. Votre navigateur web le conservera pendant
une certaine durée, et le renverra au serveur web chaque fois que vous vous y
re-connecterez.
<dsa-button slot="footer">Fermer</dsa-button>
<dsa-button slot="footer" variant="secondary">
Refuser
</dsa-button>
<dsa-button slot="footer" variant="primary">
Accepter
</dsa-button>
</dsa-dialog>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/dialog/dialog.js'
import type { DSADialog } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant boîte de dialogue
import { Component } from '@angular/core';
import type { DSADialog } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/dialog/dialog.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-dialog classname="dialog-overview" label="Dialog">
Un « cookie » est une suite d'informations, généralement de petite taille et
identifié par un nom, qui peut être transmis à votre navigateur par un site
web sur lequel vous vous connectez. Votre navigateur web le conservera pendant
une certaine durée, et le renverra au serveur web chaque fois que vous vous y
re-connecterez.
<dsa-button slot="footer">Fermer</dsa-button>
<dsa-button slot="footer" variant="secondary">
Refuser
</dsa-button>
<dsa-button slot="footer" variant="primary">
Accepter
</dsa-button>
</dsa-dialog>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
label |
Le libellé affiché dans l'entête du dialog. 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 |
'' |
|
hideTitle hide-title |
Cache le titre de l'entête du dialog, permettant de conserver le bouton de fermeture. |
boolean |
false |
|
noCloseButton no-close-button |
Retire le bouton de fermeture de la boîte de dialogue. En cas d'utilisation de cet attribut, assurez-vous de fournir un remplacement accessible pour celui-ci. |
boolean |
false |
|
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 |
|
size |
La taille de la dialog |
small medium large |
medium |
|
open |
Indique si la dialog 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 de la boîte de dialogue |
boolean |
false |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Cache la dialog |
() => Promise<void> |
|
show() |
Affiche la dialog |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut)
|
Le contenu principal de la dialog |
|
footer |
Le pied de page de la dialog , 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é de la dialog. Ce slot est placé au sein d’une balise h1. Alternativement, vous pouvez utiliser l'attribut label. |
Événements
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis après que la dialog se masque et et que toutes les animations sont complétées |
|
dsa-after-show |
Émis après que la dialog s'affiche et que toutes les animations sont complétées |
|
dsa-hide |
Émis lorsque le bouton fermer est activé |
|
dsa-initial-focus |
Émis lorsque la dialog 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 la dialog en appuyant le bouton fermer, en cliquant le overlay ou la touche échapper. Appeler event.preventDefault() gardera la dialog ouverte. Évitez de l'utiliser à moins que la fermeture de la boîte de dialogue n'entraîne un comportement destructeur tel qu'une perte de données |
|
dsa-show |
Émis lorsque la dialog est affichée |