Statut
-
Component checklist
Usage
<dsa-filter-date label="Date"></dsa-filter-date>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/filter-date/filter-date.js';
import type { DSAFilterDate } 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 |
|---|---|---|---|
|
buttonLabel button-label |
Une description qui est lue par les appareils et accessoires fonctionnels lors de l'utilisation du bouton d'ouverture/fermeture du sélecteur de date. |
string |
'' |
|
calendarStartDate calendar-start-date |
La valeur de départ du calendrier si aucune date n'est sélectionnée. |
string |
Date du jour |
|
drawer |
Mettre à true si le filtre est utilisé dans un drawer |
boolean |
false |
|
disabled |
Désactive le filtre |
boolean |
false |
|
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 |
'' |
|
lang |
La langue dans laquelle la date doit être formattée. Si non définie, le format de date sera celui du système. |
string |
'' |
|
max |
La valeur maximale du filtre (au format yyyy-mm-dd). |
string |
|
|
min |
La valeur minimale du filtre (au format yyyy-mm-dd). |
string |
|
|
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 |
|
placeholder |
Un texte qui apparaît dans le contrôle lorsqu'aucune valeur n'y est écrite |
string |
'' |
|
range |
Si true, active la sélection de la plage de dates. |
boolean |
false |
|
readonly |
Rend le filtre de date en lecture |
boolean |
false |
|
value |
La valeur du filtre. La valeur doit être sous le format ISO 8601. Exemple: AAAA-MM-JJ. |
string |
'' |
|
hide-calendar-button |
Cache le bouton d'ouverture du calendrier. |
boolean |
false |
Méthodes
|
Nom |
Description |
Type |
|
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 |