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.

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.

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

Impostare gli 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 degli attributi. L'esempio seguente crea del testo rosso.

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

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

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.

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

Impostare dinamicamente le 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.

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

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

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

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

Aggiungere elementi figlio

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

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

Cancellare gli 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.

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.

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

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

Rimuovere un elemento

È possibile rimuovere un elemento utilizzando Remove-UDElement.

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.

Selettore di colori

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
• Set-UDElement
• Remove-UDElement
• Add-UDElement
• Clear-UDElement
• Sync-UDElement
• Select-UDElement

Vedere anche

• Devolutions Academy – Aggiungere tabelle di dati
• Devolutions Academy – Recuperare i dettagli utente

---