Widget Controller widget (Contrôleur de widgets)

Le widget Widget Controller (Contrôleur de widgets) est un conteneur permettant d’organiser d’autres widgets dans une barre d’outils. Vous pouvez orienter les widgets dans le contrôleur horizontalement ou verticalement. Vous pouvez contrôler le nombre de widgets pouvant être ouverts et le mode d’affichage des boutons de widget.

Exemple

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

• Vous souhaitez créer une application centrée sur une carte, plein écran, avec des widgets organisés dans un contrôleur de type barre d’outils où les utilisateurs peuvent ouvrir un ou plusieurs widgets pour interagir avec la carte, le cas échéant.

Remarques sur l’utilisation

Pour ajouter des widgets au contrôleur, cliquez sur le bouton Add widget (Ajouter un widget) et sélectionnez-en un dans la bibliothèque de widgets ou faites glisser un widget du panneau Insert widget (Insérer un widget) sur le contrôleur. Configurez les widgets ajoutés en cliquant dessus dans le contrôleur pour en ouvrir le panneau des paramètres. Faites glisser le coin inférieur du panneau du widget pour définir sa taille initiale.

Lorsque vous cliquez sur un widget dans le contrôleur pour ouvrir le volet correspondant lors de l’exécution, une ligne d’indicateur apparaît sous l’icône du widget pour indiquer que le widget est actif. Vous pouvez utiliser les boutons Expand (Développer) et Collapse (Réduire) pour modifier l’espace occupé par les volets sans les fermer complètement.

Paramètres

Le widget Widget Controller (Contrôleur de widgets) inclut les paramètres suivants :

• Direction (Direction) : affichez le contrôleur suivant une direction verticale ou horizontale.
• Behavior (Comportement) : définissez le nombre de widgets pouvant être ouverts à partir de ce contrôleur et les widgets qui s’ouvrent automatiquement au chargement de la page.
  • Single (Unique) : un seul widget peut être ouvert à la fois. L’ouverture d’un widget en ferme un autre.
  • Multiple (Multiple) : plusieurs widgets peuvent être ouverts et exécutés à la fois. Dans ce cas, vous pouvez afficher les widgets ouverts empilés ou côte à côte.

    Conseil :

    Pour tester ces options, cliquez sur Live view (Vue en temps réel) dans la barre d’outils du générateur.

  • Autorisez l’ouverture automatique d’un ou de plusieurs widgets au chargement de la page en les sélectionnant dans la liste des widgets.
• Widget panel arrangement (Disposition des volets de widget) : choisissez l’emplacement des volets de widget :
  • Floating (Flottant) : les volets de widget sont flottants à côté du contrôleur, ancré à l’icône de chaque widget.
  • Fixed (Fixé) – Fixez les volets de widget de sorte qu’ils apparaissent dans l’un des neuf poins d’ancrage de la zone d’affichage. Vous pouvez définir la largeur et la hauteur du volet en pixels (px) ou en pourcentage de la zone d’affichage (%). Vous pouvez également définir des décalages pour les axes x et y et ajouter une animation à exécuter lorsque les volets apparaissent.
    • Vous pouvez également définir la largeur et la hauteur du volet sur Stretch (Étirer). Si vous faites cela, le volet s’étire pour remplir la zone d’affichage selon les marges Top (Haut), Bottom (Bas), Left (Gauche) et Right (Droite), que vous pouvez définir en pixels (px) ou en pourcentage de la zone d’affichage (%).

  Remarque :

  Le paramètre Widget panel arrangement (Disposition des volets de widget) s’applique uniquement lorsque le widget est affiché sur des écrans de moyenne ou de grande taille. Sur les appareils possédant un écran de petite taille, les volets de widget apparaissent an bas de l’application. En savoir plus sur l’optimisation de la mise en page sur tous les appareils.

• Appearance (Apparence) : sélectionnez les widgets dans le contrôleur de widgets et personnalisez leurs icônes, leurs étiquettes ou leur style.
  • Icon (Icône) : utilisez un cercle ou un rectangle pour les icônes de widget.
  • Label (Étiquette) : affichez les noms des widgets sous forme d’étiquettes sous les icônes. Vous pouvez modifier ces étiquettes en modifiant le nom du widget dans les volets des paramètres ou sur le contour du générateur.
  • Indicator (Indicateur) : incluez les lignes d’indicateur qui indiquent les widgets actifs.
  • Tooltip (Info-bulle) : incluez un texte de survol pour les boutons.
  • Size (Taille) : modifiez la taille des icônes de widget.
  • Spacing (Espacement) : spécifiez l’espace entre les icônes de widget en pixels (px).
• Advanced (Avancé) : choisissez la manière dont les boutons de la barre d’outils apparaissent pour les trois états : Default (Par défaut), Selected (Sélectionné) et Hover (Survol). Vous pouvez changer la couleur d’arrière-plan de l’icône et, si vous activez les étiquettes, vous pouvez changer la couleur de la police et appliquer le format du texte en gras, italique, barré et souligné.
  • Default (Par défaut) : l’état par défaut d’un bouton sans interaction utilisateur.
  • Selected (Sélectionné) : l’état pour un bouton que l’utilisateur sélectionne sur le contrôleur ou pour un widget ouvert.
  • Hover (Survol) : l’état pour un bouton vers l’utilisateur pointe sur le contrôleur.

  Remarque :

  Le thème que vous avez sélectionné affecte les couleurs par défaut dans les panneaux de configuration. Cliquez sur More (Plus) pour choisir une couleur personnalisée si vous souhaitez utiliser une couleur qui ne fait pas partie du thème de l’application.