Composants

Une appli Universal est composée de composants. Lors de la création d'une appli, appelez des applets de commande PowerShell dans le script de l'appli pour créer des composants.

New-UDApp -Title 'Dashboard' -Content {
    New-UDTypography -Text 'Hello, world!'
}

Types de composants

Il existe plus de 50 composants que vous pouvez utiliser dans les applis. Les catégories courantes comprennent l'affichage des données, la visualisation des données, la rétroaction, les entrées, la navigation, la disposition, les utilitaires et les surfaces.

• Affichage des données : alertes, tableaux et chronologies.
• Visualisation des données : graphiques et cartes.
• Rétroaction : fenêtres modales et indicateurs de progression.
• Entrées : boutons, formulaires, zones de texte et interrupteurs.
• Navigation : menus, indicateurs d'étapes et onglets.
• Disposition : grilles et piles.
• Utilitaires : composants dynamiques, éléments et composants HTML.
• Surfaces : cartes et panneaux d'expansion.

Accessibilité et attributs ARIA

Utilisez le paramètre partagé -Aria pour ajouter des attributs ARIA aux composants interactifs pris en charge. Le paramètre accepte un bloc de script contenant une ou plusieurs commandes New-UDAriaAttribute. PowerShell Universal applique les attributs résultants à l'élément interactif ou d'entrée.

New-UDTextbox -Id 'HardWords' -Label 'Nougat Croissant Valet' -Aria {
    New-UDAriaAttribute -Label -Value 'noo-gah Krwah-sahn val-ay'
    New-UDAriaAttribute -LabelledBy -Value 'hardWordsLabel'
}

Cet exemple rend aria-label="noo-gah Krwah-sahn val-ay" et aria-labelledby="hardWordsLabel" sur l'entrée de la zone de texte. Utilisez les attributs ARIA pour fournir un nom accessible, relier les instructions et le texte d'erreur, et exprimer l'état du contrôle lorsque son contenu visible ne le fait pas déjà.

Attributs pris en charge

New-UDAriaAttribute prend en charge les assistants suivants :

Assistant	Attribut rendu
-Label	aria-label
-LabelledBy ou -LabeledBy	aria-labelledby
-DescribedBy	aria-describedby
-Description	aria-description
-Controls	aria-controls
-Expanded	aria-expanded
-HasPopup	aria-haspopup
-Hidden	aria-hidden
-Invalid	aria-invalid
-Required	aria-required
-Role	role

Utilisez des valeurs valides pour l'attribut ARIA que vous sélectionnez. Privilégiez les étiquettes et la sémantique natives lorsqu'elles sont suffisantes; ARIA les complète et ne devrait pas remplacer les étiquettes visibles ni le comportement standard des formulaires.

Composants pris en charge

Les composants suivants prennent en charge -Aria :

• New-UDAutocomplete
• New-UDButton et New-UDIconButton
• New-UDCheckbox
• New-UDSelect
• New-UDRadioGroup et New-UDRadio
• New-UDSwitch
• New-UDSlider
• New-UDLink
• New-UDDatePicker et New-UDTimePicker
• New-UDRating
• New-UDFloatingActionButton
• New-UDUpload
• New-UDToggleButtonGroup et New-UDToggleButton
• New-UDTextbox

Pour les zones de texte, les valeurs explicites dans -Attributes ont priorité lorsque le même attribut est aussi défini au moyen de -Aria.

Gestionnaires d'événements

De nombreux composants fournissent des gestionnaires d'événements pour des fonctionnalités interactives telles que les clics, la validation et le rendu. Les gestionnaires d'événements utilisent des blocs de script PowerShell.

New-UDButton -Text 'Click me!' -OnClick {
    Show-UDToast -Message 'Clicked!'
}

Dans les gestionnaires d'événements, vous pouvez exécuter n'importe quelle commande PowerShell valide, y compris des commandes provenant de modules externes à PowerShell Universal, comme ActiveDirectory ou Microsoft.Graph.

Données d'événement

Les gestionnaires d'événements peuvent fournir des données sous forme de $EventData. La valeur dépend du composant : la modification d'une zone de texte retourne sa valeur, tandis que la soumission d'un formulaire retourne un objet contenant les valeurs du formulaire.

New-UDTextbox -OnChange {
    Show-UDToast -Message $EventData
}

New-UDForm -Content {
    New-UDTextbox -Id 'UserName'
} -OnSubmit {
    Show-UDToast -Message $EventData.UserName
}

Utilisez $Body lorsque vous avez besoin de la chaîne JSON brute fournie au gestionnaire d'événements. Certains contrôles fournissent aussi $PSUItem avec l'ID de l'élément, le type, l'ID de l'événement, le nom de l'événement, les données de l'événement et l'emplacement.

Portée

PowerShell Universal rend les variables dans la portée disponibles aux gestionnaires d'événements, mais chaque gestionnaire s'exécute dans son propre runspace. Ne comptez pas sur la portée $Global: ou $Script: pour partager un état entre les gestionnaires; utilisez plutôt des portées personnalisées.

Évitez d'hériter de $EventData dans les gestionnaires d'événements imbriqués, car le gestionnaire imbriqué le remplace. Stockez la valeur externe requise dans une variable avant de créer le composant imbriqué.

New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        $Name = $EventData.Name
        New-UDButton -Text $Name -OnClick {
            Show-UDToast -Message $Name
        }
    }
) -Data $Data

Voir aussi

• Devolutions Academy - Ajouter des tableaux de données