Bouton

Les boutons permettent aux utilisateurs d'effectuer des actions et de faire des choix d'une seule pression.

Bouton contenu

Les boutons contenus sont à forte emphase et se distinguent par leur utilisation de l'élévation et du remplissage. Ils contiennent des actions qui sont primaires pour votre appli.

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

Bouton contouré

Les boutons contourés sont des boutons à emphase moyenne. Ils contiennent des actions qui sont importantes, mais qui ne sont pas l'action primaire dans une appli.

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

Contrôler la taille du bouton

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

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

Boutons avec icônes et étiquette

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

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 afficheront une icône de chargement pendant l'exécution d'un gestionnaire d'événements. C'est utile pour les événements de plus 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 l'appelle aussi bouton fractionné.

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"
    }
}

Groupe de boutons

Désactiver le bouton après le 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