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

# Elemento

Il cmdlet `New-UDElement` consente di creare elementi React personalizzati all'interno dell'app. Analogamente a `New-UDHtml`, è possibile definire elementi HTML utilizzando `New-UDElement`. A differenza di `New-UDHtml`, è possibile aggiornare gli elementi, impostare l'aggiornamento automatico e sfruttare il sistema di componenti React.

## Creare un elemento

È necessario specificare `-Tag` e `-Content` durante la creazione di un elemento. L'esempio seguente crea un tag div.

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

È possibile annidare i componenti l'uno nell'altro per creare strutture HTML. Ad esempio, si potrebbe creare un elenco non ordinato con l'esempio seguente.

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

## Impostazione degli attributi

È possibile selezionare gli attributi di un elemento (come gli attributi HTML) utilizzando il parametro `-Attributes`. Questo parametro accetta una hashtable di nomi e valori di attributi. L'esempio seguente crea testo rosso.

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

È possibile racchiudere qualsiasi componente con New-UDElement e aggiungere un gestore di eventi.

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

## Elementi con aggiornamento automatico

È possibile definire i parametri `-AutoRefresh`, `-RefreshInterval` ed `-Endpoint` per creare un elemento che si aggiorna a un determinato intervallo. L'esempio seguente crea un elemento che si aggiorna ogni secondo e visualizza l'ora corrente.

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

## Impostazione dinamica delle proprietà degli elementi

È possibile utilizzare il cmdlet `Set-UDElement` per impostare dinamicamente le proprietà e il contenuto degli elementi. L'esempio seguente imposta il contenuto dell'elemento sull'ora corrente.

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

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

È inoltre possibile impostare gli attributi utilizzando il parametro `-Properties` di `Set-UDElement`. L'esempio seguente imposta l'ora corrente e cambia il colore in rosso.

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

## Aggiunta di elementi figlio

È possibile aggiungere elementi figlio utilizzando `Add-UDElement`. L'esempio seguente aggiunge elementi di elenco figlio a un elenco non ordinato.

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

## Cancellazione degli elementi figlio

È possibile cancellare gli elementi figlio di un elemento utilizzando `Clear-UDElement`. L'esempio seguente cancella tutti gli elementi di elenco da un elenco non ordinato.

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

## Forzare il ricaricamento di un elemento

È possibile forzare il ricaricamento di un elemento utilizzando `Sync-UDElement`. L'esempio seguente fa sì che il div venga ricaricato con la data corrente.

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

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

## Rimozione di un elemento

È possibile rimuovere un elemento utilizzando `Remove-UDElement`.

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

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

## Esempio: selettore di colori

Crei un selettore di colori con un gestore di eventi OnChange utilizzando New-UDElement.

<figure><img src="/files/3iKNW3hOJsuU9enJFiEO" alt=""><figcaption><p>Selettore di colori</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**](/powershell-universal/it/comandi-powershell/get-udelement.md)
* [**Set-UDElement**](/powershell-universal/it/comandi-powershell/set-udelement.md)
* [**Remove-UDElement**](/powershell-universal/it/comandi-powershell/remove-udelement.md)
* [**Add-UDElement**](/powershell-universal/it/comandi-powershell/add-udelement.md)
* [**Clear-UDElement**](/powershell-universal/it/comandi-powershell/clear-udelement.md)
* [**Sync-UDElement**](/powershell-universal/it/comandi-powershell/sync-udelement.md)
* [**Select-UDElement**](/powershell-universal/it/comandi-powershell/select-udelement.md)

#### 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/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.