Statut
Component checklist
Usage
<dsa-alert alert-title="Titre du bandeau d’alerte" open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce finibus fringilla diam ac ornare. Aenean ac dolor id dui dictum volutpat.
Donec ac nibh lacinia, euismod diam cursus, viverra arcu. Phasellus scelerisque ex nunc, ut euismod nisi imperdiet sed.
Proin faucibus justo orci, eget molestie urna tincidunt ac.
</dsa-alert>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/alert/alert.js'
import type { DSAAlert } from '@ds-autonomie/web-components'
const alertEl = document.querySelector<DSAAlert>('#alert')
if (alertEl !== null) {
console.log(alertEl.alertTitle)
}
</script>
Code HTML à implémenter pour utiliser l'alerte
import { Component } from '@angular/core';
import type { DSAAlert } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/alert/alert.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-alert alert-title="Titre du bandeau d’alerte" open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce finibus fringilla diam ac ornare. Aenean ac dolor id dui dictum volutpat.
Donec ac nibh lacinia, euismod diam cursus, viverra arcu. Phasellus scelerisque ex nunc, ut euismod nisi imperdiet sed.
Proin faucibus justo orci, eget molestie urna tincidunt ac.
</dsa-alert>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
closable |
Affiche un bouton de fermeture qui permet à l'utilisateur de rejeter l'alerte. |
boolean |
false |
|
open |
Indique si l'alerte est ouverte. Vous pouvez activer/désactiver cet attribut pour afficher et masquer l'alerte, ou vous pouvez utilisez les méthodes show() et hide() et cet attribut reflétera l'état ouvert de l'alerte. |
boolean |
false |
|
size |
Taille de l’alerte |
small medium |
medium |
|
variant |
Variante thématique de l'alerte. |
primary success neutral warning danger |
primary |
|
alertTitle alert-title |
Titre de l'alerte |
string |
'' |
|
headerLevel header-level |
Le niveau aria-level du titre. Obligatoire si une valeur est ajoutée à l'attribut |
1 | 2 | 3 | 4 | 5 | 6 |
|
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Masque l'alerte |
() => Promise<void> |
|
show() |
Affiche l'alerte |
() => Promise<void> |
|
toast() |
Affiche l'alerte sous forme de notification toast. Cela déplacera l'alerte hors de sa position dans le DOM et, une fois rejetée, elle sera complètement supprimée du DOM. En stockant une référence à l'alerte, vous pouvez la réutiliser en appelant à nouveau cette méthode. La promesse renvoyée sera résolue une fois l’alerte masquée |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal |
|
action |
Un slot d'action facultatif, généralement un dsa-button |