> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/fr/applis/components.md).

# Composants

Découvrez la bibliothèque de composants de PowerShell Universal, incluant l'accessibilité, l'affichage des données, la visualisation, les entrées, la navigation, la disposition et les gestionnaires d'

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.

```powershell
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.

```powershell
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.

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

```powershell
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é.

```powershell
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](https://academy.devolutions.net/student/page/3466031-adding-data-tables?curriculum_activity_id=5612258\&path_id=3465905\&sid=1b852f65-706e-452f-a2b6-96b76149ddb2\&sid_i=0)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/fr/applis/components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.