Statut
-
Component checklist
Usage
<dsa-filter-range
label="Libellé"
start="0"
end="100"
></dsa-filter-range>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/filter-range/filter-range.js';
import type { DSAFilterRange } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour le composant filter-range
import { Component } from '@angular/core';
import type { DSAFilterRange } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/filter/filte-range/filter-range.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-filter-range
label="Libellé"
start="0"
end="100"
></dsa-filter-range>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
defaultEnd default-end |
La valeur supérieure par défaut de l'intervalle du filtre. |
string |
'' |
|
defaultStart default-start |
La valeur inférieure par défaut de l'intervalle du filtre. |
string |
'' |
|
disabled |
Désactive le filtre |
boolean |
false |
|
drawer |
Mettre à true si le filtre est utilisé dans un drawer |
boolean |
false |
|
end |
La valeur supérieure de l'intervalle du filtre. |
string |
'' |
|
hoist |
Activez cette option pour éviter que le panneau ne soit coupé lorsque le composant est placé à l'intérieur d'un conteneur avec `overflow : scroll \| auto`. Hoisting utilise une stratégie de positionnement fixe qui fonctionne dans de nombreux cas, mais pas dans tous. |
boolean |
false |
|
label |
Le label du filtre, affiché sur le bouton. |
string |
'' |
|
max |
La valeur maximale du champ qui sera considérée comme valide. |
number |
\- |
|
min |
La valeur minimale du champ qui sera considérée comme valide. |
number |
\- |
|
open |
Indique si le filtre est ouvert ou non. Utiliser cet attribut pour afficher ou cacher le filtre, ou utiliser les méthodes show() et hide(). |
boolean |
false |
|
readonly |
Rend le filtre en lecture seule |
boolean |
false |
|
slider |
Affiche un curseur de contrôle supplémentaire. |
boolean |
false |
|
start |
La valeur inférieur de l'intervalle du filtre. |
string |
'' |
Méthodes
|
Nom |
Description |
Type |
|
blur() |
Enlève le focus du filtre |
() => void |
|
focus() |
Met le focus sur le filtre |
(options?: FocusOptions) => void |
|
hide() |
Cache le panneau du dropdown |
() => Promise<void> |
|
show() |
Affiche le panneau du dropdown |
() => Promise<void> |
Événements
Comment utiliser les événements ?
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis une fois que le panneau est caché |
|
dsa-after-show |
Émis une fois que le panneau est ouvert |
|
dsa-blur |
Émis lorsque le filtre perd le focus |
|
dsa-change |
Émis lorsque la valeur du champ de saisie change |
|
dsa-focus |
Émis lorsque le filtre obtient le focus |
|
dsa-hide |
Émis quand le panneau est caché |
|
dsa-input |
Émis lorsque le champ de recherche reçoit une entrée |
|
dsa-show |
Émis quand le panneau s'ouvre |
|
dsa-submit |
Émis lorsque l'utilisateur confirme le changement de la valeur du filtre |