> 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/utilities/element.md).

# Élément

Créez des éléments React personnalisés dans les applis PowerShell Universal avec New-UDElement, incluant les attributs, l'actualisation automatique, les mises à jour dynamiques et les éléments enfants

L'applet de commande `New-UDElement` vous permet de créer des éléments React personnalisés dans votre appli. Comme avec `New-UDHtml`, vous pouvez définir des éléments HTML à l'aide de `New-UDElement`. Contrairement à `New-UDHtml`, vous pouvez mettre à jour les éléments, définir l'actualisation automatique et profiter du système de composants React.

## Créer un élément

Vous devez spécifier `-Tag` et `-Content` lors de la création d'un élément. L'exemple ci-dessous crée une balise div.

```powershell
New-UDElement -Tag 'div' -Content { 'Hello' }
```

Vous pouvez imbriquer les composants les uns dans les autres pour créer des structures HTML. Par exemple, vous pourriez créer une liste non ordonnée avec l'exemple suivant.

```powershell
New-UDElement -Tag 'ul' -Content {
    New-UDElement -Tag 'li' -Content { 'First' }
    New-UDElement -Tag 'li' -Content { 'Second' }
    New-UDElement -Tag 'li' -Content { 'Third' }
}
```

## Définir des attributs

Vous pouvez sélectionner les attributs d'un élément (comme les attributs HTML) en utilisant le paramètre `-Attributes`. Ce paramètre accepte une table de hachage de noms et de valeurs d'attributs. L'exemple ci-dessous crée du texte rouge.

```powershell
New-UDElement -Tag 'div' -Content { 'Hello' } -Attributes @{
    style = @{
        color = 'red'
    }
}
```

Vous pouvez encapsuler n'importe quel composant avec New-UDElement et ajouter un gestionnaire d'événement.

```powershell
New-UDElement -Tag div -Content {
    New-UDIcon -Icon "user"
} -Attributes @{
    onClick = {
        Show-UDToast "Nice!"
    }
}
```

## Éléments à actualisation automatique

Vous pouvez définir les paramètres `-AutoRefresh`, `-RefreshInterval` et `-Endpoint` pour créer un élément qui s'actualise à un intervalle donné. L'exemple ci-dessous crée un élément qui s'actualise chaque seconde et affiche l'heure actuelle.

```powershell
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -AutoRefresh -RefreshInterval 1
```

## Définir les propriétés d'un élément dynamiquement

Vous pouvez utiliser l'applet de commande `Set-UDElement` pour définir les propriétés et le contenu d'un élément dynamiquement. L'exemple suivant définit le contenu de l'élément à l'heure actuelle.

```powershell
New-UDElement -Tag 'div' -Id 'myElement' -Content { }

New-UDButton -Text 'Click Me' -OnClick {
    Set-UDElement -Id 'myElement' -Content { Get-Date }
}
```

Vous pouvez également définir des attributs en utilisant le paramètre `-Properties` de `Set-UDElement`. L'exemple suivant définit l'heure actuelle et change la couleur en rouge.

```powershell
    New-UDElement -Tag 'div' -Id 'myElement' -Content { }

    New-UDButton -Text 'Click Me' -OnClick {
        Set-UDElement -Id 'myElement' -Content { Get-Date } -Properties @{ Attributes = @{ style = @{ color = "red" } } }
    }
```

## Ajouter des éléments enfants

Vous pouvez ajouter des éléments enfants à l'aide de `Add-UDElement`. L'exemple suivant ajoute des éléments de liste enfants à une liste non ordonnée.

```powershell
New-UDElement -Tag 'ul' -Content {

} -Id 'myList'

New-UDButton -Text 'Click Me' -OnClick {
    Add-UDElement -ParentId 'myList' -Content {
        New-UDElement -Tag 'li' -Content { Get-Date }
    }
}
```

## Effacer les éléments enfants

Vous pouvez effacer les éléments enfants d'un élément en utilisant `Clear-UDElement`. L'exemple suivant efface tous les éléments de liste d'une liste non ordonnée.

```powershell
New-UDElement -Tag 'ul' -Content {
    New-UDElement -Tag 'li' -Content { 'First' }
    New-UDElement -Tag 'li' -Content { 'Second' }
    New-UDElement -Tag 'li' -Content { 'Third' }
}  -Id 'myList'

New-UDButton -Text 'Click Me' -OnClick {
    Clear-UDElement -Id 'myList'
}
```

## Forcer le rechargement d'un élément

Vous pouvez forcer le rechargement d'un élément à l'aide de `Sync-UDElement`. L'exemple suivant fait en sorte que le div se recharge avec la date actuelle.

```powershell
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -Id 'myDiv'

New-UDButton -Text 'Click Me' -OnClick {
    Sync-UDElement -Id 'myDiv'
}
```

## Supprimer un élément

Vous pouvez supprimer un élément en utilisant `Remove-UDElement`.

```powershell
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -Id 'myDiv'

New-UDButton -Text 'Click Me' -OnClick {
    Remove-UDElement -Id 'myDiv'
}
```

## Exemple : sélecteur de couleurs

Créez un sélecteur de couleurs avec un gestionnaire d'événement OnChange à l'aide de New-UDElement.

```powershell
function New-UDColorPicker {
    [CmdletBinding()]
    param(
        [Parameter()]
        [string]$Id = [Guid]::NewGuid(),
        [Parameter()]
        [ScriptBlock]$OnChange,
        [Parameter()]
        [string]$Value,
        [Parameter()]
        [Hashtable]$Style
    )

    New-UDElement -Id $Id -Tag "input" -Attributes @{
        value = $Value
        type = "color"
        onChange = $OnChange
        style = $Style
    }
}

New-UDApp -Content { 
    New-UDColorPicker -Id 'colorPicker' -OnChange {
        Show-UDToast $EventData -Position topLeft -Persistent
    }
}
```

## API

* [**Get-UDElement**](/powershell-universal/fr/commandes-powershell/get-udelement.md)
* [**Set-UDElement**](/powershell-universal/fr/commandes-powershell/set-udelement.md)
* [**Remove-UDElement**](/powershell-universal/fr/commandes-powershell/remove-udelement.md)
* [**Add-UDElement**](/powershell-universal/fr/commandes-powershell/add-udelement.md)
* [**Clear-UDElement**](/powershell-universal/fr/commandes-powershell/clear-udelement.md)
* [**Sync-UDElement**](/powershell-universal/fr/commandes-powershell/sync-udelement.md)
* [**Select-UDElement**](/powershell-universal/fr/commandes-powershell/select-udelement.md)

### Voir aussi

* [Devolutions Academy – Ajout de 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)
* [Devolutions Academy – Récupération des détails de l'utilisateur](https://academy.devolutions.net/student/activity/3543018-part-3-fetching-user-details)

***


---

# 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/utilities/element.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.