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

# Element

Erstellen Sie benutzerdefinierte React-Elemente in PowerShell Universal-Apps mit New-UDElement – einschließlich Attributen, automatischer Aktualisierung, dynamischen Updates und untergeordneten Elemen

Das Cmdlet `New-UDElement` ermöglicht es Ihnen, benutzerdefinierte React-Elemente innerhalb Ihrer App zu erstellen. Ähnlich wie bei `New-UDHtml` können Sie HTML-Elemente mit `New-UDElement` definieren. Anders als bei `New-UDHtml` können Sie Elemente aktualisieren, automatische Aktualisierung festlegen und das React-Komponentensystem nutzen.

## Ein Element erstellen

Sie müssen beim Erstellen eines Elements `-Tag` und `-Content` angeben. Das folgende Beispiel erstellt ein div-Tag.

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

Sie können Komponenten ineinander verschachteln, um HTML-Strukturen zu erstellen. Zum Beispiel könnten Sie mit dem folgenden Beispiel eine unsortierte Liste erstellen.

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

## Attribute festlegen

Sie können Attribute eines Elements (wie HTML-Attribute) mithilfe des Parameters `-Attributes` auswählen. Dieser Parameter akzeptiert eine Hashtable mit Attributnamen und -werten. Das folgende Beispiel erstellt roten Text.

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

Sie können jede Komponente mit New-UDElement umschließen und einen Event-Handler hinzufügen.

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

## Elemente automatisch aktualisieren

Sie können die Parameter `-AutoRefresh`, `-RefreshInterval` und `-Endpoint` definieren, um ein Element zu erstellen, das in einem bestimmten Intervall aktualisiert wird. Das folgende Beispiel erstellt ein Element, das jede Sekunde aktualisiert wird und die aktuelle Uhrzeit anzeigt.

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

## Elementeigenschaften dynamisch festlegen

Sie können das Cmdlet `Set-UDElement` verwenden, um Elementeigenschaften und -inhalte dynamisch festzulegen. Das folgende Beispiel setzt den Inhalt des Elements auf die aktuelle Uhrzeit.

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

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

Sie können Attribute auch mit dem Parameter `-Properties` von `Set-UDElement` festlegen. Das folgende Beispiel setzt die aktuelle Uhrzeit und ändert die Farbe auf Rot.

```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" } } }
    }
```

## Untergeordnete Elemente hinzufügen

Sie können untergeordnete Elemente mit `Add-UDElement` hinzufügen. Das folgende Beispiel fügt einer unsortierten Liste untergeordnete Listenelemente hinzu.

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

## Untergeordnete Elemente löschen

Sie können die untergeordneten Elemente eines Elements mit `Clear-UDElement` löschen. Das folgende Beispiel löscht alle Listenelemente aus einer unsortierten Liste.

```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'
}
```

## Das Neuladen eines Elements erzwingen

Sie können das Neuladen eines Elements mit `Sync-UDElement` erzwingen. Das folgende Beispiel bewirkt, dass das div mit dem aktuellen Datum neu geladen wird.

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

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

## Ein Element entfernen

Sie können ein Element mit `Remove-UDElement` entfernen.

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

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

## Beispiel: Farbauswahl

Erstellen Sie eine Farbauswahl mit einem OnChange-Event-Handler unter Verwendung von 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/de/powershell-befehle/get-udelement.md)
* [**Set-UDElement**](/powershell-universal/de/powershell-befehle/set-udelement.md)
* [**Remove-UDElement**](/powershell-universal/de/powershell-befehle/remove-udelement.md)
* [**Add-UDElement**](/powershell-universal/de/powershell-befehle/add-udelement.md)
* [**Clear-UDElement**](/powershell-universal/de/powershell-befehle/clear-udelement.md)
* [**Sync-UDElement**](/powershell-universal/de/powershell-befehle/sync-udelement.md)
* [**Select-UDElement**](/powershell-universal/de/powershell-befehle/select-udelement.md)

### Siehe auch

* [Devolutions Academy – Adding data tables](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 – Fetching user details](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/de/apps/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.