Liste de boutons

Liste de boutons pour faire un choix simple. La liste est construite dynamiquement à partir d’une liste d’options.

NOTE Il n’est pas possible de sélectionner plusieurs boutons en même temps.

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

SynApps

Retour à la ligne

SynApps

La taille verticale de l’acteur est automatiquement adaptée à la taille du texte sauf si celle ci est fixée.

Tronqué

SynApps

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 :

SynApps

Options

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

Chaîne JSON contenant un tableau d’options.

La propriété spécifique Options permet de renseigner les boutons avec le format JSON.

Il y a trois paramètres à renseigner afin de créer un nouveau bouton via le format JSON :

  • value (OBLIGATOIRE):
    Renseigne la valeur du bouton.
    La valeur attendue est une chaine de caractère.

  • text (OBLIGATOIRE):
    Renseigne le texte qui est affiché sur le bouton.
    La valeur attendue est une chaine de caractère.

  • disabled (OPTIONNEL):
    Permet d’activer / désactiver le bouton.
    La valeur attendue est un booléen (true/false).
    Si cette option n’est pas précisée, la valeur par défaut est False.

EXEMPLE Voici une liste de 3 boutons, dont le dernier est désactivé :

[
  {
    "value": "bouton1",
    "text": "Button 1"
  },
  {
    "value": "bouton2",
    "text": "Button 2"
  },
  {
    "value": "bouton3",
    "text": "Button 3",
    "disabled": true
  }
]

Sélection

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

Valeur de clé sélectionnée.

La propriété spécifique Selection reflète la valeur sélectionnée en cours.

La valeur attendue est la value de l’une des options de l’acteur.

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.

options

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

Obtient les options sous forme de tableau.

Texte sélectionné

this.text · 🔒 lecture seule · String

Obtient le texte correspondant à la sélection.

É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.

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.