Liste de choix

SynApps

Acteur d’interaction qui permet d’afficher une liste d’options matérialisées par des boutons radio, empilés horizontalement ou verticalement. Une seule option peut être sélectionnée à la fois.

Sommaire

🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule

Propriétés

Actif?

this.properties.enabled · boolean · défaut true · modifie : Style CSS

En ligne?

this.properties.isInline · boolean · défaut false · modifie : Taille

Les boutons s’empilent horizontalement ?

Si cette propriété a la valeur false, les boutons s’empileront verticalement.

État de validation

this.properties.validationState · 'default' | 'valid' | 'invalid' · défaut 'default' · modifie : Rendu

État de validation de l’acteur.

L’acteur possède une propriété état de validation qui permet de présenter l’acteur dans des état de validation différents :

  • Valide : l’acteur est vert.
  • Invalide : l’acteur est rouge.
  • Normal : l’acteur est normale.

Cette couleur prend le pas sur la propriété couleur qui est normalement utilisée pour définir la couleur du texte.

Options

this.properties.options · string · défaut '[]'

Chaîne JSON contenant un tableau d’options.

La propriété Options est une chaîne JSON qui contient un tableau d’options.

Une option est un object JSON qui possède les propriétés suivantes :

CHAMPS DESCRIPTION PAR DÉFAUT
value La valeur de l’option. C’est son identifiant unique dans la liste. De préférence, la valeur est une chaîne de caractères. -
text Le texte qui s’affiche à côté du bouton radio. -
disabled Indique si l’option doit apparaître désactivée. false

Exemple :

SynApps

[
  {
    "value": "value1",
    "text": "Option 1"
  },
  {
    "value": "value2",
    "text": "Option 2"
  },
  {
    "value": "value3",
    "text": "Option 3"
  }
]

Sélection

this.properties.value · string · défaut null

Valeur de clé sélectionnée.

La propriété Sélection est une chaîne qui la valeur qui correspond au choix dans la liste des options.

Exemples:

l’option 1 est sélectionnée :

value1

Aucune valeur n’est sélectionnée si la valeur est une chaîne vide.

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.

hasOptions

this.hasOptions · 🔒 lecture seule · boolean

Obtient la valeur indiquant si l’acteur a des options.

Liste des options

this.options · 🔒 lecture seule · Array.<JSON.Option>

Obtient les options 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 · String

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 :

  • InputBase : Base pour les acteurs de saisie.