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

# Komponenter

Udforsk komponentbiblioteket i PowerShell Universal, herunder tilgængelighed, datavisning, visualisering, input, navigation, layout og hændelseshandlere.

En Universal-app består af komponenter. Når De opbygger en app, skal De kalde PowerShell-cmdlets i app-scriptet for at oprette komponenter.

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

## Komponenttyper

Der er mere end 50 komponenter, som De kan bruge i apps. Almindelige kategorier omfatter datavisning, datavisualisering, feedback, input, navigation, layout, værktøjer og overflader.

* **Datavisning**: alerts, tabeller og tidslinjer.
* **Datavisualisering**: diagrammer og kort.
* **Feedback**: modaler og fremdriftsindikatorer.
* **Input**: knapper, formularer, tekstfelter og switche.
* **Navigation**: menuer, steppere og faner.
* **Layout**: gitre og stakke.
* **Hjælpeprogrammer**: dynamiske, element- og HTML-komponenter.
* **Overflader**: kort og udvidelsespaneler.

## Tilgængelighed og ARIA-attributter

Brug den delte parameter `-Aria` til at tilføje ARIA-attributter til understøttede interaktive komponenter. Parameteren accepterer en scriptblok, der indeholder en eller flere `New-UDAriaAttribute`-kommandoer. PowerShell Universal bruger de resulterende attributter på det interaktive element eller inputelementet.

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

Dette eksempel gengiver `aria-label="noo-gah Krwah-sahn val-ay"` og `aria-labelledby="hardWordsLabel"` på tekstfeltets input. Brug ARIA-attributter til at angive et tilgængeligt navn, knytte instruktioner og fejltekst sammen og udtrykke kontrolelementets tilstand, når dets synlige indhold ikke allerede gør det.

### Understøttede attributter

`New-UDAriaAttribute` understøtter følgende hjælpere:

| Hjælper                          | Gengivet attribut  |
| -------------------------------- | ------------------ |
| `-Label`                         | `aria-label`       |
| `-LabelledBy` eller `-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`             |

Brug gyldige værdier for den ARIA-attribut, De vælger. Foretræk oprindelige etiketter og semantik, når de er tilstrækkelige; ARIA supplerer dem og bør ikke erstatte synlige etiketter eller standardformularadfærd.

### Understøttede komponenter

Følgende komponenter understøtter `-Aria`:

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

For tekstfelter har eksplicitte værdier i `-Attributes` forrang, når den samme attribut også er defineret via `-Aria`.

## Hændelseshandlere

Mange komponenter leverer hændelseshandlere til interaktiv funktionalitet som klik, validering og gengivelse. Hændelseshandlere bruger PowerShell-scriptblokke.

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

I hændelseshandlere kan De køre enhver gyldig PowerShell-kommando, herunder kommandoer fra moduler uden for PowerShell Universal, f.eks. ActiveDirectory eller Microsoft.Graph.

### Hændelsesdata

Hændelseshandlere kan levere data som `$EventData`. Værdien afhænger af komponenten: en ændring af et tekstfelt returnerer dets værdi, mens en formularindsendelse returnerer et objekt med formularværdierne.

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

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

Brug `$Body`, når De har brug for den rå JSON-streng, der leveres til hændelseshandleren. Nogle kontrolelementer leverer også `$PSUItem` med elementets id, type, hændelses-id, hændelsesnavn, hændelsesdata og placering.

### Omfang

PowerShell Universal gør variabler i scope tilgængelige for hændelseshandlere, men hver hændelseshandler kører i sit eget runspace. Stol ikke på `$Global:`- eller `$Script:`-scopet til at dele tilstand mellem hændelseshandlere; brug brugerdefinerede scopes i stedet.

Undgå at nedarve `$EventData` i indlejrede hændelseshandlere, fordi den indlejrede handler erstatter den. Lagre den påkrævede ydre værdi i en variabel, før De opretter den indlejrede komponent.

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

#### Se også

* [Devolutions Academy - Tilføjelse af datatabeller](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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.devolutions.net/powershell-universal/da/apps/components.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.