> 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.md).

# Komponenten

Entdecken Sie die Komponentenbibliothek von PowerShell Universal, einschließlich Barrierefreiheit, Datenanzeige, Visualisierung, Eingaben, Navigation, Layout und Ereignishandlern.

Eine Universal-App besteht aus Komponenten. Beim Erstellen einer App rufen Sie PowerShell-Cmdlets innerhalb des App-Skripts auf, um Komponenten zu erstellen.

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

## Komponententypen

Es gibt mehr als 50 Komponenten, die Sie in Apps verwenden können. Zu den gängigen Kategorien gehören Datenanzeige, Datenvisualisierung, Feedback, Eingaben, Navigation, Layout, Dienstprogramme und Oberflächen.

* **Datenanzeige**: Warnungen, Tabellen und Zeitleisten.
* **Datenvisualisierung**: Diagramme und Karten.
* **Feedback**: Modale und Fortschrittsanzeigen.
* **Eingaben**: Schaltflächen, Formulare, Textfelder und Schalter.
* **Navigation**: Menüs, Stepper und Registerkarten.
* **Layout**: Raster und Stapel.
* **Dienstprogramme**: dynamische, Element- und HTML-Komponenten.
* **Oberflächen**: Karten und Erweiterungsbereiche.

## Barrierefreiheit und ARIA-Attribute

Verwenden Sie den gemeinsamen Parameter `-Aria`, um unterstützten interaktiven Komponenten ARIA-Attribute hinzuzufügen. Der Parameter akzeptiert einen Skriptblock, der einen oder mehrere `New-UDAriaAttribute`-Befehle enthält. PowerShell Universal wendet die resultierenden Attribute auf das interaktive oder Eingabeelement an.

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

In diesem Beispiel werden `aria-label="noo-gah Krwah-sahn val-ay"` und `aria-labelledby="hardWordsLabel"` auf der Textfeldeingabe gerendert. Verwenden Sie ARIA-Attribute, um einen barrierefreien Namen bereitzustellen, Anweisungen und Fehlertexte zu verknüpfen und den Zustand des Steuerelements auszudrücken, wenn der sichtbare Inhalt dies nicht bereits tut.

### Unterstützte Attribute

`New-UDAriaAttribute` unterstützt die folgenden Hilfsparameter:

| Hilfsparameter                  | Gerendertes Attribut |
| ------------------------------- | -------------------- |
| `-Label`                        | `aria-label`         |
| `-LabelledBy` oder `-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`               |

Verwenden Sie gültige Werte für das ausgewählte ARIA-Attribut. Bevorzugen Sie native Labels und Semantik, wenn diese ausreichen; ARIA ergänzt sie und sollte sichtbare Labels oder standardmäßiges Formularverhalten nicht ersetzen.

### Unterstützte Komponenten

Die folgenden Komponenten unterstützen `-Aria`:

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

Bei Textfeldern haben explizite Werte in `-Attributes` Vorrang, wenn dasselbe Attribut auch über `-Aria` definiert ist.

## Ereignishandler

Viele Komponenten bieten Ereignishandler für interaktive Funktionalität wie Klicks, Validierung und Rendering. Ereignishandler verwenden PowerShell-Skriptblöcke.

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

Innerhalb von Ereignishandlern können Sie jeden gültigen PowerShell-Befehl ausführen, einschließlich Befehlen aus Modulen außerhalb von PowerShell Universal wie ActiveDirectory oder Microsoft.Graph.

### Ereignisdaten

Ereignishandler können Daten als `$EventData` bereitstellen. Der Wert hängt von der Komponente ab: Eine Textfeldänderung gibt ihren Wert zurück, während eine Formularübermittlung ein Objekt mit den Formularwerten zurückgibt.

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

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

Verwenden Sie `$Body`, wenn Sie die rohe JSON-Zeichenfolge benötigen, die dem Ereignishandler bereitgestellt wird. Einige Steuerelemente stellen außerdem `$PSUItem` mit der Element-ID, dem Typ, der Ereignis-ID, dem Ereignisnamen, den Ereignisdaten und dem Ort bereit.

### Gültigkeitsbereich

PowerShell Universal stellt Ereignishandlern Variablen im Gültigkeitsbereich zur Verfügung, aber jeder Handler läuft in seinem eigenen Runspace. Verlassen Sie sich nicht auf den Bereich `$Global:` oder `$Script:`, um den Zustand zwischen Handlern zu teilen; verwenden Sie stattdessen benutzerdefinierte Bereiche.

Vermeiden Sie das Vererben von `$EventData` in verschachtelten Ereignishandlern, da der verschachtelte Handler es ersetzt. Speichern Sie den erforderlichen äußeren Wert in einer Variablen, bevor Sie die verschachtelte Komponente erstellen.

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

#### Siehe auch

* [Devolutions Academy - Datentabellen hinzufügen](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/de/apps/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.