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

# Élément

La cmdlet `New-UDElement` vous permet de créer des éléments React personnalisés dans votre application. Comme `New-UDHtml`, vous pouvez définir des éléments HTML à l'aide de `New-UDElement`. Contrairement à `New-UDHtml`, vous pouvez mettre à jour des éléments, définir un rafraîchissement automatique et tirer parti 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 des composants les uns dans les autres pour créer des structures HTML. Par exemple, vous pouvez 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 envelopper n'importe quel composant avec New-UDElement et ajouter un gestionnaire d'événements.

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

## Éléments à rafraîchissement automatique

Vous pouvez définir les paramètres `-AutoRefresh`, `-RefreshInterval` et `-Endpoint` pour créer un élément qui se rafraîchit à un intervalle donné. L'exemple ci-dessous crée un élément qui se rafraîchit 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 de façon dynamique

Vous pouvez utiliser la cmdlet `Set-UDElement` pour définir les propriétés et le contenu d'un élément de façon dynamique. 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 en utilisant `Sync-UDElement`. L'exemple suivant force la div à se recharger 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 couleur

Créez un sélecteur de couleur avec un gestionnaire d'événements OnChange en utilisant New-UDElement.

<figure><img src="/files/IJgSijgfmB6xMbeHS04p" alt=""><figcaption><p>Color Picker</p></figcaption></figure>

```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**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Get-UDElement.txt)
* [**Set-UDElement**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Set-UDElement.txt)
* [**Remove-UDElement**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Remove-UDElement.txt)
* [**Add-UDElement**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Add-UDElement.txt)
* [**Clear-UDElement**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Clear-UDElement.txt)
* [**Sync-UDElement**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Sync-UDElement.txt)
* [**Select-UDElement**](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/Select-UDElement.txt)

***


---

# 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:

```
GET https://docs.devolutions.net/powershell-universal/fr/apps/components/utilities/element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.