Statut
Component checklist
Usage
Exemples d'intégration de l'accordéon sur différents framework:
<dsa-accordion id="accordion" summary="En-tête">Détails</dsa-accordion>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/accordion/accordion.js'
import type { DSAAccordion } from '@ds-autonomie/web-components'
const accordionEl = document.querySelector<DSAAccordion>('#accordion')
if (accordionEl !== null) {
console.log(accordionEl.summary)
}
</script>
Code HTML à implémenter pour utiliser l'accordéon
import { Component } from '@angular/core';
import type { DSAAccordion } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/accordion/accordion.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-accordion id="accordion" summary="En-tête">Détails</dsa-accordion>
app.component.html
API
Attributs et propriétés
Pour les attributs booléens, true signifie que l'attribut est simplement activé (par exemple, <dsa-accordion disabled></dsa-accordion>) et false signifie que l'attribut n'est pas défini sur le composant (par exemple, <dsa-accordion></dsa-accordion> sans l'attribut disabled).
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
disabled |
Désactive l'accordéon |
boolean |
'false' |
|
headerLevel header-level |
(Optionel) Le niveau aria-level de l'en-tête |
1 | 2 | 3 | 4 | 5 | 6 |
N/A |
|
icon |
La variante d'icône pour plier/déplier l'accordéon |
'chevron' | 'box' |
'chevron' |
|
open |
Indique si l'accordéon est ouvert ou non. Vous pouvez activer/désactiver cet attribut pour plier et déplier 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 |
'' |
|
variant |
Permet de définir la variante de style de l'accordéon. Par défaut, seul un contour est appliqué. |
'outlined' \| 'filled' |
’outlined’ |
|
size |
La taille de l'accordéon |
'small' \| 'medium' |
'medium' |
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> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal |
|
summary |
Le résumé de l’accordéon. Alternativement, vous pouvez utiliser la propriété summary |
|
actions |
(Optionnel) des actions supplémentaires, qui seront visibles dans l'en-tête de l'accordéon |
É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-show |
Émis lorsque l'accordéon est ouvert |