Casella di testo

Una textbox consente agli utenti di inserire e modificare del testo.

Textbox

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

Tipi di textbox

Le textbox possono essere impostate per accettare tipi specifici, come password, numeri o email.

Tipo password

Una textbox di tipo password maschera l'input.

New-UDTextbox -Label 'Password' -Type password

Tipo numero

Accetta solo numeri. Alcuni browser includono frecce su e giù per aumentare e diminuire il valore corrente.

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

Multilinea

È possibile creare una textbox multilinea utilizzando il parametro -Multiline. Premendo invio viene aggiunta una nuova riga. È possibile definire il numero di righe e il numero massimo di righe utilizzando -Rows e -RowsMax.

New-UDTextbox -Multiline -Rows 4 -RowsMax 10

Interazione

Recupero del valore di una textbox

È possibile utilizzare Get-UDElement per ottenere il valore di una textbox

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

Impostazione del valore della textbox

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

New-UDButton -OnClick {

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

} -Text "Get textbox value"

Icone

È possibile impostare l'icona di una textbox utilizzando il parametro -Icon e il cmdlet New-UDIcon.

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

Mascheramento

È possibile utilizzare -MaskPattern per definire una maschera per la textbox. Di seguito è riportato un esempio di maschera per una textbox.

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

La definizione può contenere

• 0 - qualsiasi cifra
• a - qualsiasi lettera
• * - qualsiasi carattere
• gli altri caratteri che non sono presenti nelle definizioni personalizzate si intendono fissi
• [] - rende l'input facoltativo
• {} - include la parte fissa nel valore non mascherato
• ` - impedisce lo spostamento indietro dei simboli

Se un carattere della definizione deve essere trattato come fisso, deve essere preceduto dal carattere di escape \\ (ad esempio \\0).

Il mascheramento della textbox è gestito da imaskjs.

OnEnter

Il gestore di eventi -OnEnter viene eseguito quando l'utente preme invio nel campo di testo. È utile per eseguire altre azioni, come fare clic su un pulsante, alla pressione di invio.

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

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

OnBlur

Il gestore di eventi -OnBlur viene eseguito quando la textbox perde lo stato attivo.

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

OnValidate

Utilizzi il gestore di eventi -OnValidate per convalidare l'input digitato nella textbox.

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

API

New-UDTextbox