Statut
Component checklist
Usage
Ce composant est destiné à être utilisé en interne par les différents composants filtres du DSA. Il peut cependant être utilisé pour construire un type de filtre qui ne serait pas encore disponible.
<dsa-filter-button id="button"></dsa-filter-button>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/filter-button/filter-button.js';
import type { DSAFilterButton } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser le composant bouton filtre
import { Component } from '@angular/core';
import type { DSAFilterButton } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/filter-button/filter-button.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-filter-button id="button"></dsa-filter-button>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
ariaControls aria-controls |
Id du panneau contrôlé par le bouton |
string |
'' |
|
ariaExpanded aria-expanded |
Le nombre d'options sélectionnées. Affiché dans le bouton si plusieurs options sont sélectionnées |
true false |
false |
|
disabled |
Désactive le bouton |
boolean |
false |
|
drawer |
Mettre à true si le filtre est utilisé dans un drawer |
boolean |
false |
|
label |
Fournit un libellé textuel au bouton. |
string |
'' |
|
readonly |
Rend le bouton filtre en lecture seule |
boolean |
false |
|
selectedOption selected-option |
Le libellé de l'option sélectionnée. Affiché dans le bouton si une seule option est sélectionnée |
string |
'' |
|
selectionCount selection-count |
Le nombre d'options sélectionnées. Affiché dans le bouton si plusieurs options sont sélectionnées |
number |
0 |