Widget Button (Bouton)

Le widget Button (Bouton) fournit des liens vers des pages et des vues de section de votre application ou vers une adresse Web. Vous pouvez utiliser une source de données pour fournir des boutons dynamiques dont le texte ou le lien change en fonction des entités sélectionnées (par exemple, dans une carte ou une liste). Vous pouvez choisir différents styles, tailles et couleurs pour concevoir vos boutons.

Exemples

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous disposez d’une couche d’entités qui contient des URL vers des sites Web et souhaitez utiliser un bouton comme lien pour ouvrir le site Web associé à une entité sélectionnée.
• Votre application comporte plusieurs pages et un menu sur la page d’accueil pour accéder à chaque page. Vous avez également plusieurs sections auxquelles vous souhaitez que les utilisateurs puissent accéder rapidement. Vous pouvez créer des boutons qui renvoient un utilisateur à la page d’accueil ou lui permettent d’accéder à des sections ou des pages pertinentes depuis n’importe quel emplacement de l’application.

Remarques sur l'utilisation

Lorsque vous ajoutez un widget Button (Bouton) à la page, la fenêtre Quick style (Style rapide) apparaît en regard du widget ; vous pouvez y sélectionner une conception parmi celles coordonnées au thème de votre application. (Pour accéder de nouveau à cette fenêtre ultérieurement, cliquez sur le bouton Quick style (Style rapide) dans la barre d’outils du widget.) Vous pouvez également configurer votre propre conception de bouton en sélectionnant des couleurs et des polices pour les états normaux et de survol dans les paramètres avancés.

Si vous connectez le bouton à une source de données, telle qu’une couche d’entités, les données d'entité peuvent être utilisées pour alimenter le texte ou l’URL du bouton du lien.

Paramètres

Le widget Button (Bouton) inclut les paramètres suivants :

• Connect to data (Connexion aux données) : connectez éventuellement le bouton à des données pour pouvoir définir un lien dynamique, par exemple, en utilisant une URL des attributs d'entité.
  • Select data (Sélectionner des données) : sélectionnez des couches d’entités comme source de données.
• Set link (Définir un lien) : ajoutez un lien au bouton pour qu’il ouvre une adresse Web ou une vue ou page de section dans votre application. Si vous créez un lien vers une adresse Web, saisissez une URL (qui commence par https://). Si vous connectez le bouton à une source de données, sélectionnez une source dynamique pour l’URL en utilisant Attribute (Attribut) ou Expression (Expression). Vous pouvez choisir si le lien doit s’ouvrir dans la même fenêtre que l’application, dans la fenêtre supérieure ou dans une nouvelle fenêtre.
  • Tooltip (Info-bulle) : spécifiez un texte d’info-bulle pour décrire la ressource ouverte par le bouton.
  • Text (Texte) : spécifiez le texte qui doit apparaître sur le bouton. Si vous connectez le bouton à des données, vous pouvez utiliser du texte dynamique qui dépend de la source de données en sélectionnant Attribute (Attribut), Statistic (Statistique) ou Expression (Expression).
  • Icon (Icône) : ajoutez une icône au bouton et choisissez de la positionner à gauche ou à droite du texte du bouton. Vous pouvez sélectionner des icônes dans les bibliothèques General (Général) et Arrows (Flèches) ou ajouter votre propre icône à partir d’un fichier.
• Advanced (Avancé) : remplacez la police et les couleurs héritées du thème de l’application pour styliser les deux états du bouton : Regular (Normal) représente l’état du bouton sans interaction de l’utilisateur et Hover (Survol) correspond à l’état du bouton initié par l’utilisateur lorsque ce dernier pointe ou clique sur le bouton.
  • Text (Texte) : modifiez la couleur et la taille de la police (en pixels) et stylisez le texte du bouton à l’aide d’une mise en forme en gras, italique, barré et souligné.
  • Background (Arrière-plan) : choisissez une couleur de remplissage ou une image pour définir l’arrière-plan du bouton. Si vous choisissez une image, vous pouvez la positionner dans le bouton à l’aide de l’option Fit (Ajuster), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer). Si vous sélectionnez Fit (Ajuster), le bouton affiche la couleur de remplissage de l'arrière-plan autour de l’image.
  • Border (Bordure) : choisissez une couleur, un style (tel que tireté ou pointillé) et une largeur de bordure en pixels.
  • Corner (Coin) : modifiez la taille du rayon (en pixels ou en pourcentage) pour mettre en forme les coins du bouton. Verrouillez les paramètres pour synchroniser les rayons des quatre coins.
  • Shadow (Ombre) : ajoutez un effet d’ombre autour du bouton à l’aide des paramètres suivants :
    • Offset X (Décalage X) : définissez la distance horizontale de l’ombre. Une valeur négative place l’ombre à gauche du bouton et une valeur positive la place à droite.
    • Offset Y (Décalage Y) : définissez la distance verticale de l’ombre. Une valeur négative place l’ombre au-dessus du bouton et une valeur positive la place en dessous.
    • Blur radius (Rayon de flou) : appliquez un effet de flou à l’ombre.
    • Spread radius (Rayon de répartition) : ajustez la taille de l’ombre.
    • Color (Couleur) : sélectionnez une couleur d’ombre.