Périodes
L’acteur Période propose une sélection de périodes types et expose les bornes de date correspondantes à la période sélectionnée.
L’acteur Période a beaucoup de similitudes avec l’acteur Liste de boutons et propose la plupart de ses propriétés (En ligne?, Taille, Mode, …).
Sommaire
🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule
Propriétés
Actif?
this.properties.enabled · boolean · défaut true · modifie : Style CSS
La propriété spécifique Actif? permet d’activer / désactiver toute interaction avec la liste de tous les boutons.
Lorsque la propriété est désactivée, la liste de boutons concernée n’est pas cliquable par l’utilisateur. Les événements d’interaction sont de ce fait désactivés.
Lorsque la propriété est activée, la liste de boutons fonctionne normalement et tous ses événements sont activés.
Dépassement de texte
this.properties.textOverflow · 'nowrap' | 'break' | 'wrap' | 'truncate' · défaut 'nowrap' · modifie : Rendu
Comportement au dépassement de texte.
La propriété spécifique Dépassement de texte permet de gérer l’affichage du texte dans le cas ou la taille du conteneur ne suffit pas à afficher l’entièreté du texte.
Il existe donc quatre options pour cette propriété :
- Sans retour à la ligne.
- Retour à la ligne.
- Retour à la ligne (cassure).
- Tronqué.
Voici des exemples pour chacun des exemples :
Sans retour à la ligne
Retour à la ligne
La taille verticale de l’acteur est automatiquement adaptée à la taille du texte sauf si celle ci est fixée.
Tronqué
En ligne?
this.properties.isInline · boolean · défaut true · modifie : Taille
Les boutons s’empilent horizontalement ?
Si cette propriété a la valeur false, les boutons s’empileront verticalement.
La propriété spécifique En ligne? permet de changer l’orientation d’empilement de la liste de boutons.
Lorsque cette propriété est activée, la liste est affichée sur une seule ligne, les boutons côte à côte.
A l’inverse, lorsqu’elle est désactivée, les boutons s’affichent sur une seule colonne, les uns en dessous des autres.
Mode
this.properties.mode · 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | 'dark' | 'link' · défaut 'info' · modifie : Rendu
Mode d’affichage des boutons.
La propriété spécifique Mode permet d’assigner des classes bootstrap à l’ensemble de la liste de bouton.
Chaque classe possède son code couleur propre.
Liste des options disponibles avec leurs exemples :
Périodes présentes
this.properties.options · 'all' | 'today' | 'last24' | 'week' | 'weekprevious' | 'month' | 'monthprevious' | 'year' | 'yearprevious' · défaut '[]'
Chaîne JSON contenant un tableau de clé des périodes à afficher Array.<string>.
Possibilités parmi :
'all''today''last24''week''weekprevious''month''monthprevious''year''yearprevious'
Cette propriété permet de définir les périodes présentes et leur ordre d’apparition dans l’acteur sous la forme d’un tableau JSON des valeurs possible. Par ex:
[ "today", "last24", "week", "weekprevious", "month", "monthprevious", "year", "yearprevious" ]
Sélection
this.properties.value · string · défaut 'today'
Valeur de clé sélectionnée.
La propriété Selection reflète la valeur sélectionnée en cours.
La valeur attendue est la value de l’une des périodes de l’acteur parmi :
| Valeur | Période |
|---|---|
all | Tout |
today | Aujourd’hui |
last24 | Dernières 24H |
week | Semaine en cours |
weekprevious | Semaine dernière |
month | Mois en cours |
monthprevious | Mois dernier |
year | Année en cours |
yearprevious | Année dernière |
Taille
this.properties.size · 'default' | 'large' | 'small' · défaut 'default' · modifie : Rendu
Taille de l’acteur.
La propriété spécifique Taille permet de changer celle de l’acteur.
Cette propriété possède trois options :
- Par défaut.
- Grand.
- Petit.
Seul le choix par défaut vous laisse la possibilité de modifier la taille du texte. Les autres options prennent le pas sur tout autre réglage.
Informations
Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.
Date de début
this.dateFrom · 🔒 lecture seule · String ou null
Obtient la date de début de période correspondante à la sélection.
Ce champ contient la date de début (format ISO) de la période sélectionnée. S’il n’y a pas de période sélectionnée, ou que par définition, elle n’a pas de début, la valeur est null.
Date de fin
this.dateTo · 🔒 lecture seule · String ou null
Obtient la date de fin de période correspondante à la sélection.
Ce champ contient la date de fin (format ISO) de la période sélectionnée. S’il n’y a pas de période sélectionnée, ou que par définition, elle n’a pas de fin, la valeur est null.
hasOptions
this.hasOptions · 🔒 lecture seule · boolean
Obtient la valeur indiquant si l’acteur a des options.
Liste des options
this.options · 🔒 lecture seule
Obtient les périodes proposées sous forme de tableau.
Le tableau des options est accessible dans le champ d’information Liste des options.
Texte sélectionné
this.text · 🔒 lecture seule
Obtient le texte correspondant à la sélection.
Le champ d’information Texte sélectionné contient le texte correspondant à l’option sélectionné.
Événements
Les évènements communs à tous les acteurs sont décrits avec l’acteur de base.
onSelected
Se produit lorsqu’une option a été sélectionnée.
context : contexte d’évènement, avec en plus :
Membre de context | Type | Description |
|---|---|---|
value | String | Valeur de l’option sélectionnée. |
L’évènement onSelected est déclenché lorsque la sélection change.
Hérite de
Outre ce qui est décrit ici, l’acteur a tout ce que décrit l’acteur de base : propriétés communes (taille, disposition, aspect, texte, bordures, effets…), évènements communs (cycle de vie, souris, clavier…) et membres accessibles par script.
Il hérite aussi de :
- ButtonList : Acteur liste de boutons. Permet d’afficher une liste de options matérialisées par des boutons, empilés horizontalement ou verticalement. Type : input/button-list
- InputBase : Base pour les acteurs de saisie.
