Partager via

Nav contrôle

  • Article

Un contrôle utilisé pour assurer la navigation.

Note

La documentation complète et le code source sont accessibles dans le Référentiel de composants de code GitHub.

Contrôle Nav.

Description

Un volet de navigation (Nav) fournit des liens vers les principales zones d’une application ou d’un site.

Le composant de code Nav permet d’utiliser le composant de menu Nav de l’interface utilisateur Fluent depuis les applications canevas et les pages personnalisées.

Note

Le code source du composant et plus d’informations dans le Référentiel de composants de code GitHub.

Propriétés

Propriétés principales

Property Description
Selected key La clé à sélectionner. Celle-ci sera mise à jour via l’événement OnChange lorsque l’utilisateur interagira avec le contrôle.
Items Obligatoire. La table des éléments source de données à afficher.
Fields Obligatoire. Les champs inclus à partir du jeu de données.

Items propriétés

Chaque élément utilise le schéma suivant pour visualiser les données dans le composant.

Nom Description
ItemDisplayName Le nom d’affichage de la commande/de l’onglet/de l’élément de menu
ItemKey Clé à utiliser pour indiquer quel élément est sélectionné et lors de l’ajout de sous-éléments. Les clés doivent être uniques.
ItemEnabled Définir sur false si l’option est désactivée
ItemVisible Définir sur false si l’option n’est pas visible
ItemIconName L’icône Fluent UI à utiliser (voir Icônes Fluent UI)
ItemIconColor La couleur de rendu de l’icône (par exemple, nommée, valeur RGB ou hexadécimale)
ItemIconOnly Ne pas afficher l’étiquette de texte - uniquement l’icône
ItemParentKey Afficher l’option en tant qu’élément enfant d’une autre option
ItemExpanded Définir sur false ou true si le groupe doit rester réduit ou développé, respectivement.

Exemple :

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

Propriétés du style

Property Description
Theme Accepte une chaîne JSON générée à l’aide du Concepteur de thème Fluent UI (windows.net). Si vous laissez ce champ vide, le thème par défaut défini par Power Apps sera utilisé. Consultez Création de thèmes pour obtenir des instructions de configuration.
AccessibilityLabel Étiquette aria pour les lecteurs d’écran
CollapseByDefault Définir sur True ou False (Activé ou Désactivé) pour que tout le groupe de navigation reste réduit ou développé, respectivement. La propriété expand au niveau de l’élément individuel est respectée.

Propriétés d’événement

Property Description
InputEvent Un événement à envoyer au contrôle. Par exemple, SetFocus. Voir ci-dessous.

Behavior

Prend en charge SetFocus en tant que InputEvent.

Configurer le comportement de « OnSelect »

Utilisez la formule Switch() dans la propriété OnSelect du composant pour configurer des actions spécifiques pour chaque élément en se référant à la la valeur ItemKey sélectionnée du contrôle comme valeur de switch.

Remplacez les valeurs false avec les expressions appropriées dans le langage Power Fx.

  Switch( Self.Selected.ItemKey,

    /* Action for ItemKey 1 */
    "1", false,

    /* Action for ItemKey 2 */
    "2", false,

    /* Action for ItemKey 3 */
    "3", false,

    /* Action for ItemKey 4 */
    "4", false,

    /* Action for ItemKey 5 */
    "5", false,

    /* Default action */
        false
  )

Définir le focus sur le contrôle

Lorsqu’une nouvelle boîte de dialogue s’affiche et que le focus par défaut doit être sur le contrôle, il est nécessaire de définir le focus explicitement.

Pour effectuer des appels à l’événement d’entrée, vous pouvez définir une variable de contexte liée à la propriété Input Event sur une chaîne commençant par SetFocus et suivie d’un élément aléatoire pour vous assurer que l’application le détecte comme un changement.

Par exemple,

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

La variable de contexte ctxResizableTextareaEvent sera alors liée à la propriété Input Event.

Limitations

Ce composant de code ne peut être utilisé que dans les applications canevas et les pages personnalisées.