Bouton de menu

Le Bouton de menu est un bouton conçu pour fonctionner avec un Menu de navigation. Il met à jour la scène sélectionnée du menu et adapte son style en fonction de l’état actif/inactif. Le style actif est également le style appliqué au bouton au survol.

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 de gérer l’activation du bouton.

Lorsque la propriété est désactivée, le bouton concerné n’est pas cliquable par l’utilisateur. Les événements hormis ceux du cycle de vie de l’acteur sont de ce fait désactivées.

Lorsque la propriété est activée, le bouton fonctionne normalement et tous ses événements sont activés.

Contenu

this.properties.content · string · défaut '' · {{jokerable}}

Contenu HTML du bouton. Peut être complété par des jokers.

Cette propriété permet de définir du contenu HTML de l’acteur.

Exemple :

SynApps

Ceci est <i>un</i> <b style="background-color: red;">bouton</b>

Jokerable

Il est possible de placer des jokers (ex.: {{jokerKey}}) dans le contenu qui seront remplacés par la valeur d’additionnelles de même clé.

Par exemple :

Ceci est <i>un</i> <b style="background-color: {{theColor}};">bouton</b>.

Une additionnelle de clé theColor de type couleur remplacera le joker par sa valeur.

S’il est possible d’ajouter du style CSS avec une balise HTML <style>, il n’est par contre pas possible d’ajouter du code Javascript. Pour cela, il faut utiliser les évènements de l’acteur.

Dépassement de texte

this.properties.textOverflow · 'nowrap' | 'break' | 'wrap' | 'truncate' · défaut 'truncate' · modifie : Rendu

Comportement au dépassement de texte.

Contrôle l’affichage du texte si celui‑ci dépasse la largeur disponible :

  • Pas de retour à la ligne
  • Retour à la ligne
  • Retour à la ligne (cassure)
  • Tronqué

Icône

this.properties.icon · string · défaut ''

Permet d’afficher une icône ou une image dans le bouton. Si une image est définie, elle est prioritaire sur l’icône.

Image

this.properties.picture · any · défaut null

Position de l’image

this.properties.iconPosition · 'left' | 'right' | 'top' | 'bottom' · défaut 'left'

Choix entre gauche, droite, haut et bas par rapport au texte pour l’icône ou l’image.

Scène

this.properties.sceneKey · clé de scène · défaut ''

Définit la scène ciblée lorsque l’utilisateur clique sur le bouton. Cette valeur est comparée à la Scène sélectionnée du Menu pour appliquer le style actif.

Informations

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

Contenu complété

this.completedContent · 🔒 lecture seule · String

Le texte une fois complété.

Le champs d’information contenu complété est le texte résultant une fois les jokers remplacés par les valeurs des additionnelles.

Est Pressé ?

this.pushing

Indique si le bouton est en train d’être enfoncé.

Le champ d’information Est pressé? est un booléen qui est true lorsque le bouton est pressé et repasse à false lorsque le bouton est relâché, après un petit délai de relaxation.

Événements

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

onDidButtonPush

Se produit lorsque le bouton est enfoncé.

context : contexte d’évènement

onDidButtonRelease

Se produit lorsque le bouton est relâché.

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 :

  • Button : Acteur Bouton. Type : input/button
  • JokerableContent (comportement) : Étend la classe pour permettre d’ajouter des jokers sur un contenu. Par défaut sur properties.content. Le valeur d’un joker est obtenue sur l’additionnelle de même clé.
  • InputBase : Base pour les acteurs de saisie.

Comportement

  • Au clic, le bouton met à jour la propriété Scène sélectionnée du Menu de navigation parent.
  • Le style actif/inactif est appliqué automatiquement en fonction de la scène sélectionnée.
  • Au survol, le bouton adopte le style actif.