Curseur

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 ou de désactiver le curseur.

Si le curseur est désactivé, aucune interaction n’est possible avec celui-ci.

Avec indicateur?

this.properties.withTooltips · boolean · défaut false

Affiche-t’on l’indication de valeur ?

La propriété spécifique Avec indicateur? permet d’activer une bulle d’aide montrant la valeur de l’acteur au dessus du curseur si celui-ci est un curseur horizontal et sur la gauche si celui-ci est un curseur vertical.

Il est nécessaire de garder suffisamment de place en hauteur (pour les curseurs horizontaux) et en largeur (pour les curseurs verticaux) pour l’affichage de cet indicateur.

barBgColor

this.properties.barBgColor · string · défaut '' · modifie : Style CSS

Couleur de l’autre côté de la barre.

Changement en glissant?

this.properties.isSlideValued · boolean · défaut false

Le glissement change la valeur ?

La propriété spécifique Changement en glissant permet de définir le rafraîchissement de la valeur lorsque l’utilisateur déplace le curseur.

Lorsque cette propriété est activée, le changement se fait directement lorsque le curseur a changé de position.

Si elle est désactivée, le changement de valeur ne sera effectué que lorsque l’utilisateur déplace et relâche le curseur.

Couleur de la barre

this.properties.barColor · string · défaut '#E0E0E0' · modifie : Style CSS

Couleur de la barre.

La propriété spécifique Couleur de la barre permet de donner une couleur à la barre de remplissage lorsque celle-ci est active.

La valeur attendue est :

  • Soit une couleur native CSS ( la liste des couleurs est retrouvable à cette adresse.).
  • Une couleur RGBA de format [ rgba(255, 255, 60, 1) ].

Il est aussi possible de sélectionner une couleur directement depuis l’inspecteur en cliquant sur la zone prévue à cet effet et en sélectionnant une couleur.

SynApps

Différence max.

this.properties.limit · number ou null · défaut null

Distance maximale entre les deux valeurs du curseur.

Différence min.

this.properties.margin · number ou null · défaut null

Distance minimale entre les deux valeurs du curseur.

Orientation

this.properties.orientation · 'horizontal' | 'vertical' · défaut 'horizontal'

Orientation du curseur.

La seconde propriété Position de la barre permet d’afficher la barre horizontalement ou verticalement. Il est à noter que si l’acteur parent n’est pas positionné comme cette propriété, l’affichage risque de ne pas être correct.

NOTE Ces propriétés n’ont qu’un impact esthétique et ne changent pas le comportement du slider.

Pas entre deux valeurs

this.properties.step · number ou null · défaut null

Pas entre deux mouvements du curseur.

La propriété spécifique Pas entre deux valeur permet de définir la valeur entre deux Valeur lorsque l’on utilise le slider.

Exemple Si le Pas entre deux valeur est établit à 4, pour une Valeur de 1 au départ, lorsque l’on fait glisser le slider pour changer la valeur, celles-ci changera de 4 en 4.

Position de la barre

this.properties.barPosition · 'default' | 'lower' | 'upper' · défaut 'default'

Position de la barre colorée.

La propriété spécifique Position de la barre permet d’afficher le remplissage de la barre dans le slider.

Cette propriété possède trois options :

  • Défaut : Il n’y a pas de barre de remplissage
  • En dessous : La barre de remplissage apparaît à gauche lorsque le slider est positionné horizontalement.
  • Au dessus : La barre de remplissage apparaît à droite lorsque le slider est positionné horizontalement.

Renversé?

this.properties.reverse · boolean · défaut false

Les valeurs sont inversées ?

La propriété spécifique Renversé? permet d’inverser la position du slider de l’acteur en effectuant une rotation sur lui même de 180°.

Valeur

this.properties.value · number · défaut 20

Valeur du curseur.

La propriété spécifique Valeur permet de définir la valeur actuelle de l’acteur curseur.

Le champ attend un nombre positif ou négatif compris dans l’intervalle des valeurs Valeur min. et Valeur max.. Le champ de saisie possède également la fonctionnalité slider, permettant de sélectionner la valeur en faisant glisser la souris sur le champs de saisie de la valeur.

Il est possible de définir manuellement la valeur en dessous et au dessus de la limite lors de la saisie, cependant, il est conseillé de rentrer une valeur comprise entre l’intervalle définie.

Valeur 2

this.properties.value2 · number · défaut 80

Deuxième valeur du curseur.

La propriété spécifique Valeur2 permet de définir la seconde valeur actuelle de l’acteur curseur.

Le champ attend un nombre positif ou négatif compris dans l’intervalle des valeurs Valeur min. et Valeur max.. Elle ne peut être non plus inférieure à la valeur de l’acteur curseur. Le champ de saisie possède également la fonctionnalité slider, permettant de sélectionner la valeur en faisant glisser la souris sur le champs de saisie de la valeur.

Il est possible de définir manuellement la valeur en dessous et au dessus de la limite lors de la saisie, cependant, il est conseillé de rentrer une valeur comprise entre l’intervalle définie.

Valeur max

this.properties.max · number · défaut 100

Valeur maximale du curseur.

Valeur min

this.properties.min · number · défaut 0

Valeur minimale du curseur.

La propriété spécifique Valeur min et Valeur max permet de délimiter une intervalle sur laquelle la Valeur du curseur de l’acteur devra être positionnée.

Les propriétés attendent un nombre positif ou négatif où la Valeur min. doit forcément être inférieure à la Valeur max.. Le champ de saisie possède également la fonctionnalité slider, permettant de sélectionner la valeur en utilisant la souris pour faire glisser le curseur sur le champ de saisie de la valeur.

Valeur unique?

this.properties.isSingleValue · boolean · défaut true

Le curseur est simple ?

La propriété spécifique Valeur unique? permet d’activer / désactiver un deuxième curseur sur l’acteur.

Il est possible de désactiver cette propriété afin d’activer un second curseur sur l’acteur.

Cela va avoir pour effet d’ajouter à l’acteur une propriété Valeur 2 qui fonctionne comme la propriété spécifique Valeur et qui va permettre de définir une intervalle.

Si un second curseur est présent, la propriété spécifique Valeur devient la borne inférieure et la propriété spécifique Valeur 2 devient la borne supérieure.

Il est à noter que la borne inférieure ne peut pas dépasser la borne supérieure et inversement.

Lorsque la propriété est désactivée, il apparaît également deux nouvelles propriétés spécifiques :
Différence min. : Permet de définir un écart minimal entre Valeur et Valeur 2
Différence max. : Permet de définir un écart maximal entre Valeur et Valeur 2

Il est possible de définir la Valeur au dessus de la borne supérieure et Valeur 2 en dessous de la borne inférieure cependant, il est conseillé de définir des valeurs comprises dans les bornes définies.

De même, la Valeur et la Valeur 2 peuvent ne pas respecter les Différence min. et Différence max. lorsqu’elles sont renseignées manuellement, il est tout de même conseillé de mettre des valeur avec un écart respectant les différences définies.

Informations

Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.

slidingValue

this.slidingValue

Obtient la valeur pendant le glissement du curseur.

slidingValue2

this.slidingValue2

Obtient la deuxième valeur pendant le glissement du curseur.

Événements

Les évènements communs à tous les acteurs sont décrits avec l’acteur de base.

onCursorSet

Se produit lorsque le curseur change de position.

context : contexte d’évènement

onCursorUpdate

Se produit lorsque le curseur glisse.

context : contexte d’évènement

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 :

  • InputBase : Base pour les acteurs de saisie.