Element

Das Cmdlet New-UDElement ermöglicht es Ihnen, benutzerdefinierte React-Elemente in Ihrer App zu erstellen. Ähnlich wie bei New-UDHtml können Sie HTML-Elemente mit New-UDElement definieren. Anders als bei New-UDHtml können Sie Elemente aktualisieren, die automatische Aktualisierung festlegen und das React-Komponentensystem nutzen.

Ein Element erstellen

Sie müssen beim Erstellen eines Elements -Tag und -Content angeben. Das folgende Beispiel erstellt ein div-Tag.

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

Sie können Komponenten ineinander verschachteln, um HTML-Strukturen zu erstellen. Sie könnten zum Beispiel mit dem folgenden Beispiel eine ungeordnete Liste erstellen.

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

Attribute festlegen

Sie können Attribute eines Elements (wie HTML-Attribute) mit dem Parameter -Attributes auswählen. Dieser Parameter akzeptiert eine Hashtable mit Attributnamen und -werten. Das folgende Beispiel erstellt roten Text.

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

Sie können jede Komponente mit New-UDElement umschließen und einen Ereignishandler hinzufügen.

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

Elemente automatisch aktualisieren

Sie können die Parameter -AutoRefresh, -RefreshInterval und -Endpoint definieren, um ein Element zu erstellen, das in einem bestimmten Intervall aktualisiert wird. Das folgende Beispiel erstellt ein Element, das jede Sekunde aktualisiert wird und die aktuelle Uhrzeit anzeigt.

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

Elementeigenschaften dynamisch festlegen

Sie können das Cmdlet Set-UDElement verwenden, um Elementeigenschaften und -inhalte dynamisch festzulegen. Das folgende Beispiel setzt den Inhalt des Elements auf die aktuelle Uhrzeit.

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

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

Sie können Attribute auch mit dem Parameter -Properties von Set-UDElement festlegen. Das folgende Beispiel setzt die aktuelle Uhrzeit und ändert die Farbe auf Rot.

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

Untergeordnete Elemente hinzufügen

Sie können untergeordnete Elemente mit Add-UDElement hinzufügen. Das folgende Beispiel fügt einer ungeordneten Liste untergeordnete Listenelemente hinzu.

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

Untergeordnete Elemente löschen

Sie können die untergeordneten Elemente eines Elements mit Clear-UDElement löschen. Das folgende Beispiel löscht alle Listenelemente aus einer ungeordneten Liste.

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

Das Neuladen eines Elements erzwingen

Sie können das Neuladen eines Elements mit Sync-UDElement erzwingen. Das folgende Beispiel bewirkt, dass das div mit dem aktuellen Datum neu geladen wird.

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

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

Ein Element entfernen

Sie können ein Element mit Remove-UDElement entfernen.

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

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

Beispiel: Farbwähler

Erstellen Sie mit New-UDElement einen Farbwähler mit einem OnChange-Ereignishandler.

Farbwähler

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

Siehe auch

• Devolutions Academy – Adding data tables
• Devolutions Academy – Fetching user details

---