Zone de texte

Composant de zone de texte pour les applications universelles

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

Zone de texte

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 spécifiques, tels que les mots de passe, les nombres ou les adresses courriel.

Type mot de passe

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

New-UDTextbox -Label 'Password' -Type password

Type nombre

Accepte uniquement les nombres. Certains navigateurs afficheront des flèches vers le haut et vers le bas pour augmenter ou 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 lignes et le nombre maximal de lignes à l'aide des paramètres -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 d'une 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 le cmdlet 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 - n'importe quel chiffre
• a - n'importe quelle lettre
• * - n'importe quel caractère
• les autres caractères qui ne figurent pas dans les définitions personnalisées sont supposés être fixes
• [] - rend la saisie facultative
• {} - inclut la partie fixe dans la valeur non masquée
• ` - empêche le décalage arrière des symboles

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

Le masquage pour 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, lors de l'appui sur 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