> 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/it/app/components.md).

# Componenti

Esplori la libreria di componenti di PowerShell Universal, inclusi accessibilità, visualizzazione dei dati, visualizzazione grafica, input, navigazione, layout e gestori di eventi.

Un'app Universal è composta da componenti. Durante la creazione di un'app, richiami i cmdlet PowerShell all'interno dello script dell'app per creare i componenti.

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

## Tipi di componenti

Sono disponibili più di 50 componenti utilizzabili nelle app. Le categorie più comuni includono visualizzazione dei dati, visualizzazione grafica dei dati, feedback, input, navigazione, layout, utilità e superfici.

* **Visualizzazione dei dati**: avvisi, tabelle e timeline.
* **Visualizzazione grafica dei dati**: grafici e mappe.
* **Feedback**: finestre modali e indicatori di avanzamento.
* **Input**: pulsanti, moduli, caselle di testo e interruttori.
* **Navigazione**: menu, stepper e schede.
* **Layout**: griglie e stack.
* **Utilità**: componenti dinamici, element e HTML.
* **Superfici**: schede e pannelli di espansione.

## Accessibilità e attributi ARIA

Utilizzi il parametro condiviso `-Aria` per aggiungere attributi ARIA ai componenti interattivi supportati. Il parametro accetta un blocco di script contenente uno o più comandi `New-UDAriaAttribute`. PowerShell Universal applica gli attributi risultanti all'elemento interattivo o di input.

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

Questo esempio genera `aria-label="noo-gah Krwah-sahn val-ay"` e `aria-labelledby="hardWordsLabel"` sull'input della casella di testo. Utilizzi gli attributi ARIA per fornire un nome accessibile, collegare istruzioni e testo di errore ed esprimere lo stato del controllo quando il suo contenuto visibile non lo fa già.

### Attributi supportati

`New-UDAriaAttribute` supporta i seguenti helper:

| Helper                       | Attributo generato |
| ---------------------------- | ------------------ |
| `-Label`                     | `aria-label`       |
| `-LabelledBy` o `-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`             |

Utilizzi valori validi per l'attributo ARIA selezionato. Preferisca le etichette e la semantica native quando sono sufficienti; ARIA le integra e non deve sostituire le etichette visibili o il comportamento standard dei moduli.

### Componenti supportati

I seguenti componenti supportano `-Aria`:

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

Per le caselle di testo, i valori espliciti in `-Attributes` hanno la precedenza quando lo stesso attributo è definito anche tramite `-Aria`.

## Gestori di eventi

Molti componenti forniscono gestori di eventi per funzionalità interattive come clic, convalida e rendering. I gestori di eventi utilizzano blocchi di script PowerShell.

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

All'interno dei gestori di eventi è possibile eseguire qualsiasi comando PowerShell valido, inclusi i comandi di moduli esterni a PowerShell Universal come ActiveDirectory o Microsoft.Graph.

### Dati dell'evento

I gestori di eventi possono fornire dati come `$EventData`. Il valore dipende dal componente: la modifica di una casella di testo restituisce il suo valore, mentre l'invio di un modulo restituisce un oggetto con i valori del modulo.

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

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

Utilizzi `$Body` quando ha bisogno della stringa JSON non elaborata fornita al gestore di eventi. Alcuni controlli forniscono anche `$PSUItem` con l'ID dell'elemento, il tipo, l'ID dell'evento, il nome dell'evento, i dati dell'evento e la posizione.

### Ambito

PowerShell Universal rende disponibili ai gestori di eventi le variabili nell'ambito, ma ogni gestore viene eseguito nel proprio runspace. Non si affidi all'ambito `$Global:` o `$Script:` per condividere lo stato tra i gestori; utilizzi invece ambiti personalizzati.

Eviti di ereditare `$EventData` nei gestori di eventi nidificati, perché il gestore nidificato lo sostituisce. Memorizzi il valore esterno necessario in una variabile prima di creare il componente nidificato.

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

#### Vedere anche

* [Devolutions Academy - Aggiunta di tabelle di dati](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/it/app/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.