Bouton

Composant bouton pour les applications universelles

Les boutons permettent aux utilisateurs d'effectuer des actions et de faire des choix en un seul clic.

Bouton contenu

Les boutons contenus sont à haute emphase, distingués par leur utilisation de l'élévation et du remplissage. Ils contiennent les actions principales de votre application.

 New-UDButton -Variant 'contained' -Text 'Default'

Bouton en contour

Les boutons en contour sont des boutons à emphase moyenne. Ils contiennent des actions importantes, mais qui ne sont pas l'action principale d'une application.

New-UDButton -Variant 'outlined' -Text 'Default'

Contrôler la taille d'un bouton

Vous pouvez contrôler la taille en pixels d'un bouton en utilisant le paramètre Style.

New-UDButton -Id "Submit" -Text "Submit" -Style @{ Width = "150px"; Height = "100px" }

Boutons avec icônes et étiquette

Vous pourriez parfois vouloir ajouter des icônes à certains boutons afin d'améliorer l'expérience utilisateur de l'application, car nous reconnaissons les logos plus facilement que le texte brut. Par exemple, si vous avez un bouton de suppression, vous pouvez l'étiqueter avec une icône de corbeille.

New-UDButton -Icon (New-UDIcon -Icon trash) -Text 'Delete'

Boutons avec gestionnaires d'événements

Vous pouvez spécifier un bloc de script à exécuter lorsque le bouton est cliqué.

New-UDButton -Text 'Message Box' -OnClick {
    Show-UDToast -Message 'Hello, world!'
}

Bouton de chargement

Les boutons de chargement affichent une icône de chargement pendant l'exécution d'un gestionnaire d'événements. Cela est utile pour les événements de longue durée.

New-UDButton -Text 'Message Box' -OnClick {
    Show-UDToast -Message 'Hello, world!'
    Start-Sleep 10
} -ShowLoading

Groupe de boutons

Un groupe de boutons produit un bouton avec un menu déroulant. On parle également de bouton divisé.

New-UDButtonGroup -Children {
    New-UDButtonGroupItem -Text "Button 1" -OnClick {
        Show-UDToast "Button 1"
    }
    New-UDButtonGroupItem -Text "Button 2" -OnClick {
        Show-UDToast "Button 2"
    }
    New-UDButtonGroupItem -Text "Button 3" -OnClick {
        Show-UDToast "Button 3"
    }
}

Button Group

Désactiver le bouton après un clic

Cet exemple utilise Set-UDElement pour désactiver le bouton après avoir effectué une action.

New-UDButton -Id "btn1" -OnClick {
    Show-UDToast "Hello!"
    Set-UDElement -Id 'btn1' -Attributes @{
        disabled = $true
    }
}

API

• New-UDButton