Elemento

El cmdlet New-UDElement le permite crear elementos React personalizados dentro de su aplicación. Al igual que con New-UDHtml, puede definir elementos HTML mediante New-UDElement. A diferencia de New-UDHtml, puede actualizar elementos, configurar la actualización automática y aprovechar el sistema de componentes de React.

Crear un elemento

Debe especificar -Tag y -Content al crear un elemento. El siguiente ejemplo crea una etiqueta div.

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

Puede anidar componentes unos dentro de otros para crear estructuras HTML. Por ejemplo, podría crear una lista desordenada con el siguiente ejemplo.

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

Configurar atributos

Puede seleccionar los atributos de un elemento (como los atributos HTML) mediante el parámetro -Attributes. Este parámetro acepta una tabla hash de nombres y valores de atributos. El siguiente ejemplo crea texto rojo.

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

Puede envolver cualquier componente con New-UDElement y añadir un controlador de eventos.

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

Elementos con actualización automática

Puede definir los parámetros -AutoRefresh, -RefreshInterval y -Endpoint para crear un elemento que se actualice en un intervalo determinado. El siguiente ejemplo crea un elemento que se actualiza cada segundo y muestra la hora actual.

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

Configurar las propiedades de un elemento dinámicamente

Puede utilizar el cmdlet Set-UDElement para establecer las propiedades y el contenido de un elemento de forma dinámica. El siguiente ejemplo establece el contenido del elemento con la hora actual.

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

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

También puede establecer atributos mediante el parámetro -Properties de Set-UDElement. El siguiente ejemplo establece la hora actual y cambia el color a rojo.

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

Añadir elementos secundarios

Puede añadir elementos secundarios mediante Add-UDElement. El siguiente ejemplo añade elementos de lista secundarios a una lista desordenada.

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

Borrar elementos secundarios

Puede borrar los elementos secundarios de un elemento mediante Clear-UDElement. El siguiente ejemplo borra todos los elementos de lista de una lista desordenada.

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

Forzar la recarga de un elemento

Puede forzar la recarga de un elemento mediante Sync-UDElement. El siguiente ejemplo hace que el div se recargue con la fecha actual.

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

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

Eliminar un elemento

Puede eliminar un elemento mediante Remove-UDElement.

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

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

Ejemplo: selector de color

Cree un selector de color con un controlador de eventos OnChange mediante New-UDElement.

Selector de color

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

Véase también

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

---