Balises Meta
À l’intérieur de votre balise <head>, les balises <meta> fournissent des informations sur le titre et l’éditeur et nous permettent de recevoir des entrées utilisateur. Il existe six contrôles personnalisables par l’utilisateur : curseurs numériques, curseurs de teinte, interrupteurs booléens, sélecteurs de couleur, champs de texte et listes déroulantes. Chaque contrôle nécessite quatre attributs principaux, plus des attributs spécifiques au contrôle.
| Attribut Principal | Description | |
|---|---|---|
| property | Définit le nom de variable à utiliser dans votre code | |
| label | Le texte affiché aux utilisateurs pour l’interface de contrôle | |
| type | Spécifie le type de données : number, hue, boolean ou color | |
| default | Définit la valeur initiale utilisée par le contrôle | |
| tooltip* | (*Optionnel) Affiche une courte description lorsque l’utilisateur survole le contrôle |
Curseur Numérique
Section intitulée « Curseur Numérique »Un curseur numérique permet à l’utilisateur de choisir un nombre entier dans une plage spécifique. Il est couramment utilisé pour ajuster des paramètres tels que la vitesse d’une animation, le nombre de formes à l’écran, ou la fréquence de déclenchement d’un effet.
<meta property="myNum" label="Number Control" type="number" default="5" min="0" max="10">En pratique, voici à quoi cela ressemble :
Le curseur numérique nécessite deux attributs supplémentaires pour fonctionner correctement :
| Attribut | Description |
|---|---|
| min | Définit la valeur la plus basse que l’utilisateur peut choisir. |
| max | Définit la valeur la plus haute que l’utilisateur peut choisir. |
Curseur de Teinte
Section intitulée « Curseur de Teinte »Un curseur de teinte permet à l’utilisateur de sélectionner une teinte de couleur en utilisant le modèle de couleur HSL (Teinte, Saturation, Luminosité). Il est généralement utilisé pour les ajustements de couleur de base ou le choix d’une couleur de base pour les effets et les éléments.
<meta property="myHuePicker" label="Hue Picker Control" type="hue" default="120" min="0" max="360">Visuellement, voici à quoi cela ressemble :
Pour fonctionner correctement, le curseur de teinte nécessite deux attributs supplémentaires :
| Attribut | Description |
|---|---|
| min | Définit la valeur de teinte la plus basse que l’utilisateur peut sélectionner. La valeur minimale possible est 0 |
| max | Définit la valeur de teinte la plus haute disponible. La valeur maximale possible est 360 |
Un interrupteur booléen permet à l’utilisateur de basculer entre deux états : “activé” et “désactivé”. Ses valeurs sont limitées à 0 (désactivé) ou 1 (activé). Contrairement aux autres contrôles, les booléens s’appuient uniquement sur les attributs par défaut et ne nécessitent aucune configuration supplémentaire.
<meta property="myBool" label="Boolean Control" type="boolean" default="0"/>Ils sont couramment utilisés pour activer ou désactiver des fonctionnalités spécifiques, basculer entre des modes (comme vertical et horizontal), contrôler la visibilité et les bascules de comportement dans une interface, ou déclencher la relecture des effets.
Voici un exemple de son apparence :
Sélecteur de Couleur
Section intitulée « Sélecteur de Couleur »Un sélecteur de couleur permet à l’utilisateur de choisir une couleur en ajustant ses composantes de teinte, saturation et luminosité dans le modèle de couleur HSL standard. C’est l’outil le plus courant et standard utilisé pour choisir des couleurs, que ce soit pour les arrière-plans ou les éléments à l’écran.
<meta property="myColorpicker1" label="Colorpicker Control" type="color" default="#009bde" min="0" max="360"/>Visuellement, voici à quoi cela ressemble :
La valeur par défaut pour le sélecteur de couleur doit être spécifiée au format hexadécimal. De plus, il nécessite deux attributs supplémentaires :
| Attribut | Description |
|---|---|
| min | La valeur sélectionnable minimale, la valeur la plus basse possible est 0. |
| max | La valeur sélectionnable maximale, la valeur la plus haute possible est 360. |
Champ de Texte
Section intitulée « Champ de Texte »Un champ de texte, ou zone de saisie de texte, permet à l’utilisateur d’entrer une chaîne de caractères. La saisie se met à jour chaque fois qu’un caractère est ajouté ou supprimé du champ.
<meta property="myText" label="Text Field" type="textfield" default="yourText">Voici à quoi cela ressemble :
| Attribut | Description |
|---|---|
| default | peut ne contenir aucun caractère |
Une liste permet à l’utilisateur de sélectionner une option parmi une liste prédéfinie de valeurs. Par exemple, l’utilisateur peut choisir parmi différents personnages ou effets pour sélectionner son option préférée.
<meta property="effectChoice" label="Effect Choice" type="list" values="Low Health,Option1,Option2,Option3" default="Low Health"/>En pratique, voici à quoi cela ressemble :
L’attribut values définit tous les choix disponibles, tandis que l’attribut default spécifie quelle option est initialement sélectionnée.
| Attribut | Description |
|---|---|
| values | Une liste séparée par des virgules d’options de chaînes possibles |
| default | Définit l’option sélectionnée par défaut. Si cette valeur n’est pas incluse dans la liste values, la liste déroulante n’affichera aucune sélection par défaut et pourrait causer des problèmes. |
Pour plus d’informations sur la collecte de données brutes de votre application, consultez notre page Smart Tags !