Botón

Los botones permiten a los usuarios realizar acciones y tomar decisiones con un solo toque.

Botón contained

Los botones contained tienen un énfasis alto y se distinguen por su uso de la elevación y el relleno. Contienen acciones que son principales en su aplicación.

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

Botón outlined

Los botones outlined son botones de énfasis medio. Contienen acciones importantes, pero que no son la acción principal de una aplicación.

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

Controlar el tamaño del botón

Puede controlar el tamaño en píxeles de un botón mediante el parámetro Style

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

Botones con iconos y etiqueta

En ocasiones puede querer tener iconos en determinados botones para mejorar la experiencia de usuario de la aplicación, ya que reconocemos los logotipos más fácilmente que el texto sin formato. Por ejemplo, si tiene un botón de eliminación, puede etiquetarlo con un icono de papelera.

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

Botones con controladores de eventos

Puede especificar un bloque de script para que se ejecute cuando se haga clic en el botón

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

Botón de carga

Los botones de carga muestran un icono de carga mientras se ejecuta un controlador de eventos. Esto resulta útil para eventos de mayor duración.

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

Grupo de botones

Un grupo de botones genera un botón con un menú desplegable. También se denomina botón dividido.

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

Grupo de botones

Desactivar el botón después de hacer clic

Este ejemplo utiliza Set-UDElement para desactivar el botón después de realizar una acción.

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

API

• New-UDButton