Cuadro de texto

Un textbox permite a los usuarios introducir y editar texto.

Textbox

New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
New-UDTextbox -Label 'Textbox' -Value 'With value'

Tipos de textbox

Los textbox se pueden cambiar para aceptar tipos específicos, como contraseñas, números o correos electrónicos.

Tipo contraseña

Un textbox de contraseña enmascarará la entrada.

New-UDTextbox -Label 'Password' -Type password

Tipo número

Solo acepta números. Algunos navegadores incluirán flechas arriba y abajo para aumentar y disminuir el valor actual.

New-UDTextbox -Label 'Number' -Type number -Minimum 10 -Maximum 10000 -Value 1234

Multilínea

Puede crear un textbox multilínea usando el parámetro -Multiline. Al pulsar Intro se añadirá una nueva línea. Puede definir el número de filas y el número máximo de filas usando -Rows y -RowsMax.

New-UDTextbox -Multiline -Rows 4 -RowsMax 10

Interacción

Recuperar el valor de un textbox

Puede usar Get-UDElement para obtener el valor de un textbox

New-UDTextbox -Id 'txtExample' 
New-UDButton -OnClick {
    $Value = (Get-UDElement -Id 'txtExample').value 
    Show-UDToast -Message $Value
} -Text "Get textbox value"

Establecer el valor del textbox

New-UDTextbox -Id 'txtExample' -Label 'Label' -Value 'Value'

New-UDButton -OnClick {

    Set-UDElement -Id 'txtExample' -Properties @{
        Value = "test123"
    }

} -Text "Get textbox value"

Iconos

Puede establecer el icono de un textbox usando el parámetro -Icon y el cmdlet New-UDIcon.

New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"

Enmascaramiento

Puede usar -MaskPattern para definir una máscara para el textbox. A continuación se muestra un ejemplo de máscara de textbox.

New-UDTextbox -Id 'textbox16' -MaskPattern '[phone]'

La definición puede contener

• 0 - cualquier dígito
• a - cualquier letra
• * - cualquier carácter
• otros caracteres que no estén en definiciones personalizadas se consideran fijos
• [] - hace que la entrada sea opcional
• {} - incluye la parte fija en el valor sin máscara
• ` - evita el desplazamiento hacia atrás de los símbolos

Si un carácter de definición debe tratarse como fijo, debe escaparse con \\ (p. ej., \\0).

El enmascaramiento del textbox está controlado por imaskjs.

OnEnter

El controlador de eventos -OnEnter se ejecuta cuando el usuario pulsa Intro en el campo de texto. Resulta útil para realizar otras acciones, como hacer clic en un botón, al pulsar Intro.

New-UDTextbox -OnEnter {
    Invoke-UDEndpoint -Id 'submit' -Session
}

New-UDButton -Id 'submit' -OnClick {
    Show-UDToast -Message 'From Textbox'
}

OnBlur

El controlador de eventos -OnBlur se ejecuta cuando el textbox pierde el foco.

New-UDTextbox -OnBlur {
    Show-UDToast "Blurred"
}

OnValidate

Use el controlador de eventos -OnValidate para validar la entrada escrita en el textbox.

New-UDTextbox -OnValidate {
    if ($EventData.Length -lt 10)
    {
        New-UDValidationResult -ValidationError 'String needs to be longer than 10'
    }
}

API

New-UDTextbox