Élément

L'applet de commande New-UDElement vous permet de créer des éléments React personnalisés dans votre appli. Comme avec New-UDHtml, vous pouvez définir des éléments HTML à l'aide de New-UDElement. Contrairement à New-UDHtml, vous pouvez mettre à jour les éléments, définir l'actualisation automatique et tirer parti du système de composants React.

Créer un élément

Vous devez spécifier -Tag et -Content lors de la création d'un élément. L'exemple ci-dessous crée une balise div.

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

Vous pouvez imbriquer des composants les uns dans les autres pour créer des structures HTML. Par exemple, vous pourriez créer une liste non ordonnée avec l'exemple suivant.

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

Définir des attributs

Vous pouvez sélectionner des attributs d'un élément (comme les attributs HTML) en utilisant le paramètre -Attributes. Ce paramètre accepte une table de hachage de noms et de valeurs d'attributs. L'exemple ci-dessous crée du texte rouge.

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

Vous pouvez encapsuler n'importe quel composant avec New-UDElement et ajouter un gestionnaire d'événement.

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

Actualisation automatique des éléments

Vous pouvez définir les paramètres -AutoRefresh, -RefreshInterval et -Endpoint pour créer un élément qui s'actualise à un certain intervalle. L'exemple ci-dessous crée un élément qui s'actualise chaque seconde et affiche l'heure actuelle.

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

Définir les propriétés d'un élément dynamiquement

Vous pouvez utiliser l'applet de commande Set-UDElement pour définir dynamiquement les propriétés et le contenu d'un élément. L'exemple suivant définit le contenu de l'élément à l'heure actuelle.

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

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

Vous pouvez aussi définir des attributs en utilisant le paramètre -Properties de Set-UDElement. L'exemple suivant définit l'heure actuelle et change la couleur en rouge.

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

Ajouter des éléments enfants

Vous pouvez ajouter des éléments enfants en utilisant Add-UDElement. L'exemple suivant ajoute des éléments de liste enfants à une liste non ordonnée.

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

Effacer les éléments enfants

Vous pouvez effacer les éléments enfants d'un élément en utilisant Clear-UDElement. L'exemple suivant efface tous les éléments de liste d'une liste non ordonnée.

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

Forcer le rechargement d'un élément

Vous pouvez forcer le rechargement d'un élément en utilisant Sync-UDElement. L'exemple suivant fait recharger le div avec la date actuelle.

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

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

Supprimer un élément

Vous pouvez supprimer un élément en utilisant Remove-UDElement.

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

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

Exemple : sélecteur de couleur

Créez un sélecteur de couleur avec un gestionnaire d'événement OnChange en utilisant New-UDElement.

Sélecteur de couleur

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

Voir aussi

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

---