Partager via

Breadcrumb 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 Breadcrumb.

Description

Breadcrumb les contrôles doivent être utilisés comme aide à la navigation dans votre application ou votre site. Ils indiquent l’emplacement de la page actuelle dans une hiérarchie et aident l’utilisateur à comprendre où il se trouve par rapport au reste de cette hiérarchie. Un Breadcrumb fournit également un accès en un clic aux niveaux supérieurs de cette hiérarchie.

Ce composant de code fournit un wrapper autour du contrôle Breadcrumb de Fluent UI à utiliser dans les applications canevas et les pages personnalisées.

Propriétés

Propriétés principales

Property Description
SelectedKey Cela indique la clé sélectionnée. Celle-ci sera mise à jour via l’événement OnChange lorsque l’utilisateur interagira avec le contrôle.
Items Les éléments d’action à afficher

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 l’élément de fil d’Ariane
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.
ItemClickable Définissez-la sur false au cas où l’élément de fil d’Ariane spécifique ne serait pas cliquable.

Exemple de formule Power Fx :

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

Propriétés du style

Nom 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
MaxDisplayedItems Le nombre maximum de fils d’Ariane à afficher avant coalescence. Si zéro, alors tous les fils d’Ariane seront affichés.
OverflowIndex Index facultatif où les éléments qui dépassent seront réduits. Par défaut, il est défini sur zéro.

Propriétés d’événement

Nom 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.

Du fait que ce contrôle est utilisé pour la navigation, une action logique consiste à utiliser les fonctions de navigation (idéalement sur un écran pertinent avec les données associées chargées).

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", 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.

Exemple de formule Power Fx :

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.