Widget Menu (Menu)

Le widget Menu (Menu) organise les pages et est conçu pour aider les utilisateurs à passer d’une page de votre application à une autre. Vous pouvez modifier le sens du menu, choisir un style, tel qu’onglets ou pilules, et sélectionner une couleur pour l’arrière-plan et le menu actif.

Exemple

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

• Vous devez créer une application de plusieurs pages et permettre aux utilisateurs de passer de page en page de manière simple et intuitive.

Remarques sur l’utilisation

En règle générale, vous placez un menu au début d’une page, dans l’en-tête ou le corps. Le widget Menu est alimenté automatiquement avec les pages, liens et dossiers de l’application tels qu’ils apparaissent dans le volet Page. Les noms des pages, liens et dossiers apparaissent dans le menu suivant l’ordre que vous avez choisi, sauf si vous cliquez sur Hide from menu (Masquer dans le menu) dans le volet Page. Lorsque vous imbriquez des pages et des liens dans une page ou un dossier, ils apparaissent dans le widget Menu (Menu) sous forme de menu déroulant. Un dossier fournit un menu déroulant qui permet de cliquer sur le niveau supérieur sans changer de page. Les utilisateurs interagissent avec ce menu en survolant le lien ou en cliquant dessus, pour retourner aux pages de votre expérience.

Si le contenu du menu dépasse en hauteur ou en largeur, les flèches de navigation apparaissent au début et à la fin du menu. Vous pouvez utiliser ces flèches pour afficher toutes les options de menu.

Paramètres

Le widget Menu (Menu) inclut les paramètres suivants :

• Type (Type) : permet de définir la position et l’apparence du menu (horizontal, vertical ou icône). Le type icône réduit verticalement le menu en une fenêtre modale sur la partie de gauche ou de droite de l’application.
  • Submenu expand mode (Mode de développement du sous-menu) : le sous-menu peut apparaître développé ou pliable pour les utilisateurs finaux. Ce paramètre n’est disponible que pour les menus de type vertical et icône, et il n’est évident dans votre application que s’il contient des pages imbriquées ou des liens.
• Appearance (Apparence) : définissez l’apparence des éléments de menu à l’aide des options suivantes :
  • Style : choisissez un style de menu : par défaut, souligné ou pilules. Les couleurs de chaque style sont héritées du thème de votre application.
  • Spacing (Espacement) : définissez l’espacement en pixels entre les pages répertoriées dans le menu.
  • Alignment (Alignement) : déterminez le placement du texte sur chaque élément de menu. Par exemple, si vous créez un menu horizontal et que vous choisissez le style Underline (Souligné), les noms des pages sont alignés avec la ligne (segment gauche ou droit) ou centrés.
  • Show icon (Afficher l’icône) : affichez une icône pour chaque élément de menu qui l’identifie comme une page, un lien ou un dossier. Vous pouvez changer l’icône par défaut dans le volet Page.
• Advanced (Avancé) : remplacez le thème de votre application pour modifier l’apparence du widget.
  • Navigation arrow color (Couleur des flèches de navigation) : changez la couleur des boutons fléchés de navigation, qui apparaissent si le contenu du menu dépasse en hauteur ou en largeur. Vous pouvez changer la couleur des boutons pour les trois états suivants :
    • Default (Par défaut) : l’état par défaut du bouton sans interaction utilisateur.
    • Hover (Survol) : l’utilisateur initie cet état en pointant vers l’un des boutons.
    • Disabled (Désactivé) : état en l’absence d’option suivante ou précédente et lorsque les boutons ne répondent pas à l’interaction utilisateur.
  • Background (Arrière-plan) : ajoutez une couleur d'arrière-plan au menu.
  • Border radius (Rayon de bordure) : saisissez un rayon de bordure pour l’arrière-plan en pixels (px) ou en pourcentage (%).
  • States (États) : affichez une représentation visuelle de l’état du menu à l’aide des différents paramètres de texte et de bordure. Par exemple, vous pouvez mettre le texte en gras, augmenter la taille de la police de caractères, et utiliser une couleur d’arrière-plan et un style de bordure différents pour l’état Selected (Sélectionné).
    • Default (Par défaut) : état par défaut du menu sans interaction utilisateur.
    • Hover (Survol) : l’utilisateur initie cet état en pointant vers un lien du menu.
    • Selected (Sélectionné) : sélection de l’utilisateur dans le menu.

    Conseil :

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