Bouton
A quoi sert ce widget ?
Un bouton communique une action qui se produit lorsqu'il est utilisé au cours de l'exécution.
Quand faut-il utiliser ce widget ?
Les boutons permettent à l'utilisateur de l'expérience de naviguer au sein de l'expérience et d'interagir avec elle. Utilisez le widget
Bouton pour communiquer clairement à l'utilisateur les actions qui se produisent lorsque le bouton est utilisé. Vous pouvez définir le style des boutons à l'aide de CSS ou de thèmes prêts à l'emploi. Pour plus d'informations sur la configuration des thèmes, consultez la rubrique
Thèmes.
Comporte-t-il des propriétés, services, événements ou actions spéciaux ?
Ce widget n'a pas de propriétés, de services ou d'événements uniques.
Pour afficher la liste des propriétés, services et événements communs des widgets, consultez la rubrique
Propriétés, services et événements communs à plusieurs widgets.
Fonctionnement du widget
Voici un exemple de ce à quoi peut ressembler votre widget !
|
Etapes minimales requise pour l'utilisation
|
Apparence
|
|
1. Faites glisser et déposez un widget Bouton sur le canevas.
2. Entrez le nom du bouton dans le champ de Texte. Par exemple, Play.
3. Liez l'événement Clic du bouton à un autre widget et sélectionnez le type de liaison que vous souhaitez créer. Par exemple, si vous liez l'événement Clic à un modèle et que vous sélectionnez Lecture tout dans la fenêtre Sélectionner une cible de liaison, toutes les étapes de la séquence associée au modèle seront lues lorsque vous appuierez sur le bouton dans l'expérience.
|
| Dans cet exemple, nous avons utilisé le thème prédéfini button-balanced pour rendre le bouton vert. |
|
Styliser le widget avec CSS
Vous pouvez utiliser CSS pour styliser le widget ! Voici un exemple de classe CSS que vous pouvez créer et appliquer :
|
|
Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.
|
|
Exemple de CSS
|
Apparence
|
|
.ptc-button {
border-width: 1px;
border-style: outset;
border-color: rgb(46, 50, 49);
border-radius: 25px;
background: rgb(47, 48, 53);
font-size: 16px;
font-family: Century Gothic;
color: white;
}
|
|
Pour plus d'informations sur l'implémentation des classes CSS, consultez la rubrique
Styles d'application.
