Zone de texte

Une zone de texte permet aux utilisateurs de saisir et de modifier du texte.

Textbox

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

Types de zone de texte

Les zones de texte peuvent être configurées pour accepter des types précis, comme des mots de passe, des nombres ou des courriels.

Type mot de passe

Une zone de texte de type mot de passe masquera la saisie.

New-UDTextbox -Label 'Password' -Type password

Type nombre

N'accepte que des nombres. Certains navigateurs ajouteront des flèches vers le haut et vers le bas pour augmenter et diminuer la valeur actuelle.

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

Multiligne

Vous pouvez créer une zone de texte multiligne en utilisant le paramètre -Multiline. Appuyer sur Entrée ajoutera une nouvelle ligne. Vous pouvez définir le nombre de rangées et le nombre maximal de rangées en utilisant -Rows et -RowsMax.

New-UDTextbox -Multiline -Rows 4 -RowsMax 10

Interaction

Récupérer la valeur d'une zone de texte

Vous pouvez utiliser Get-UDElement pour obtenir la valeur d'une zone de texte

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

Définir la valeur de la zone de texte

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

New-UDButton -OnClick {

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

} -Text "Get textbox value"

Icônes

Vous pouvez définir l'icône d'une zone de texte en utilisant le paramètre -Icon et l'applet de commande New-UDIcon.

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

Masquage

Vous pouvez utiliser -MaskPattern pour définir un masque pour la zone de texte. Voici un exemple de masque de zone de texte.

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

La définition peut contenir

• 0 - tout chiffre
• a - toute lettre
• * - tout caractère
• les autres caractères qui ne figurent pas dans les définitions personnalisées sont censés être fixes
• [] - rendre la saisie facultative
• {} - inclure la partie fixe dans la valeur non masquée
• ` - empêcher le décalage des symboles vers l'arrière

Si un caractère de définition doit être traité comme fixe, il doit être échappé par \\ (p. ex., \\0).

Le masquage de la zone de texte est contrôlé par imaskjs.

OnEnter

Le gestionnaire d'événements -OnEnter est exécuté lorsque l'utilisateur appuie sur Entrée dans le champ de texte. Il est utile pour effectuer d'autres actions, comme cliquer sur un bouton, à l'appui de la touche Entrée.

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

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

OnBlur

Le gestionnaire d'événements -OnBlur est exécuté lorsque la zone de texte perd le focus.

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

OnValidate

Utilisez le gestionnaire d'événements -OnValidate pour valider la saisie effectuée dans la zone de texte.

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

API

New-UDTextbox