Control Botón en Power Apps

Un control en el que el usuario puede hacer clic o pulsar para interactuar con la aplicación.

Descripción

Configure la propiedad OnSelect de un control Botón para ejecutar una o más fórmulas cuando el usuario haga clic en el control o lo pulse.

Propiedades de la clave

OnSelect: acciones para llevar a cabo cuando el usuario toca o hace clic en un control.

Text: texto que aparece en un control o que el usuario escribe en un control.

Propiedades adicionales

Align: ubicación del texto respecto al centro horizontal de su control.

AutoDisableOnSelect: deshabilita automáticamente el control mientras se está ejecutando el comportamiento OnSelect.

BorderColor: el color del borde de un control.

BorderStyle: si el borde del control es Solid, Dashed, Dotted o None.

BorderThickness: el grosor del borde de un control.

Color: el color del texto en un control.

DisplayMode: indica si el control permite entradas de usuario (Editar), solo muestra datos (Ver) o si está deshabilitado (Deshabilitado).

DisabledBorderColor: el color del borde de un control si la propiedad DisplayMode del control está establecida en Deshabilitado.

DisabledColor: el color del texto en un control si su propiedad DisplayMode está establecida en Deshabilitado.

DisabledFill: el color de fondo de un control si su propiedad DisplayMode está establecida en Deshabilitado.

FocusedBorderColor: el color del borde de un control cuando el control recibe el foco.

FocusedBorderThickness: el grosor del borde de un control cuando el control recibe el foco.

Fill: el color de fondo de un control.

Font: el nombre de la familia de fuentes en la que aparece el texto.

FontWeight: el peso del texto en un control: Bold, Semibold, Normal o Lighter.

Height: la distancia entre los bordes superior e inferior de un control.

HoverBorderColor: el color del borde de un control cuando el usuario mantiene el puntero del ratón sobre ese control.

HoverColor: el color del texto de un control cuando el usuario mantiene el puntero del ratón sobre él.

HoverFill: el color de fondo de un control cuando el usuario mantiene el puntero del ratón sobre él.

Italic: indica si el texto de un control está en cursiva.

PaddingBottom: distancia entre el texto de un control y el borde inferior de ese control.

PaddingLeft: distancia entre el texto de un control y el borde izquierdo de ese control.

PaddingRight: distancia entre el texto de un control y el borde derecho de ese control.

PaddingTop: distancia entre el texto de un control y el borde superior de ese control.

Pressed: true mientras se presiona un control, en caso contrario false.

PressedBorderColor: el color de un borde del control cuando el usuario toca o hace clic en ese control.

PressedColor: el color de texto de un control cuando el usuario toca o hace clic en ese control.

PressedFill: el color de fondo de un control cuando el usuario toca o hace clic en ese control.

RadiusBottomLeft: el grado al que se redondea la esquina inferior izquierda de un control.

RadiusBottomRight: el grado al que se redondea la esquina inferior derecha de un control.

RadiusTopLeft: el grado al que se redondea la esquina superior izquierda de un control.

RadiusTopRight: el grado al que se redondea la esquina superior derecha de un control.

Size: tamaño de la fuente del texto que aparece en un control.

Strikethrough: indica si aparece una línea sobre el texto de un control.

TabIndex: orden de navegación del teclado en relación con otros controles.

Tooltip: texto explicativo que aparece cuando el usuario mantiene el mouse sobre un control.

Underline: indica si aparece una línea debajo del texto de un control.

VerticalAlign: ubicación del texto en un control respecto al centro vertical de ese control.

Visible: indica si un control aparece o está oculto.

Width: la distancia entre los bordes derecho e izquierdo de un control.

X: la distancia entre el borde izquierdo de un control y el borde izquierdo de su contenedor primario (la pantalla si no hay un contenedor primario).

Y: la distancia entre el borde superior de un control y el borde superior de su contenedor primario (la pantalla si no hay un contenedor primario).

Funciones relacionadas

Navigate( ScreenName, ScreenTransitionValue )

Ejemplos

Agregar una fórmula básica a un botón

1. Agregue un control Entrada de texto y denomínelo Origen.

   ¿No sabe cómo agregar, nombrar y configurar un control?

2. Agregue un control Botón, establezca su propiedad Text en "Agregar" y su propiedad OnSelect en esta fórmula:
   UpdateContext({Total:Total + Value(Source.Text)})

   ¿Desea más información sobre la función UpdateContext u otras funciones?

3. Agregue un control Etiqueta, establezca en la barra de fórmulas la propiedad Text para Valor (total) y, a continuación, presione F5.

4. Borre el texto predeterminado de Origen, escriba un número en él y, a continuación, haga clic o pulse Agregar.

   El control Etiqueta muestra el número que ha escrito.

5. Borre el número de Origen, escriba otro número y, a continuación, haga clic o pulse Agregar.

   El control Etiqueta muestra la suma de los números que ha escrito.

6. (opcional) Repita el paso anterior una o varias veces.

7. Para volver al área de trabajo predeterminada, presione Esc (o haga clic o pulse el icono de cerrar en la esquina superior derecha).

Configuración de un botón con varias fórmulas

Agregue una fórmula que borra el control Entrada de texto entre las entradas.

1. Establezca la propiedad HintText de Origen en "Escriba un número".

2. Establezca la propiedad OnSelect de Agregar en esta fórmula:

   UpdateContext({Total:Total + Value(Source.Text)});
   UpdateContext({ClearInput: ""})

   Nota

   Utilice el punto y coma ";" para separar varias fórmulas.

3. Establezca la propiedad Default de Origen en ClearInput.

4. Presione F5y, a continuación, pruebe la aplicación agregando varios números juntos.

Agregar otro botón para restablecer el total

Agregue otro botón para borrar el total entre un cálculo y otro.

1. Agregue otro control Botón, establezca su propiedad Text en "Borrar" y su propiedad OnSelect en esta fórmula:

   UpdateContext({Total:0})

2. Presione F5, sume varios números y luego haga clic o pulse Borrar para restablecer el total.

Cambiar la apariencia de un botón

Cambiar la forma de un botón

De forma predeterminada, Power Apps crea un control Botón rectangular con esquinas redondeadas. Puede realizar modificaciones básicas en la forma de un control Botón estableciendo sus propiedades Height, Width, y Radius.

Nota

Iconos y formas proporciona una gran variedad de diseños y puede realizar algunas de las mismas funciones básicas que realizan los controles Botón. Pero, Iconos y formas no tiene una propiedad Text.

1. Agregue un control Botón, y establezca sus propiedades Height y Width en 300 para crear un botón cuadrado grande.

2. Modifique las propiedades RadiusTopLeft, RadiusTopRight, RadiusBottomLeft y RadiusBottomRight para ajustar la cantidad de curvatura en cada esquina. Estos son algunos ejemplos de formas diferentes, cada una comienza a partir de un botón cuadrado de 300 x 300:

   • Establezca los cuatro valores de Radius en 150 para crear un círculo.
   • Establezca los valores de RadiusTopLeft y RadiusBottomRight en 300 para crear un Botón en forma de hoja.
   • Establezca los valores de RadiusTopLeft y RadiusTopRight en 300 y los valores de RadiusBottomLeft y RadiusBottomRight en 100 para crear un botón en forma de pestaña.

Cambio del color de un botón cuando se mantiene el puntero sobre él

De forma predeterminada, el color de relleno de un control Botón se atenuará en un 20 % al mantener el mouse sobre él. Puede ajustar este comportamiento cambiando la propiedad HoverFill, que usa la función ColorFade. Si establece la fórmula ColorFade en un porcentaje positivo, el color se vuelve más claro al mantener el mouse sobre el botón, mientras que un porcentaje negativo hace que el color sea más oscuro.

• Cambie el porcentaje de ColorFade en la propiedad HoverFill de uno de los botones que creó y observe los efectos.

También puede especificar el color de un control Botón estableciendo su propiedad HoverFill en una fórmula que contenga la función ColorValue en lugar de la función ColorFade, como en ColorValue("Red").

Nota

El valor de color puede ser cualquier definición de color CSS, ya sea un nombre o un valor hexadecimal.

• Reemplace la función ColorFade con una función ColorValue en uno de los botones que creó y observe los efectos.

Instrucciones para accesibilidad

Contraste de color

• Se aplican requisitos estándar de contraste de color.

Compatibilidad con el lector de pantalla

• La propiedad Text debe existir.

Compatibilidad con el teclado

• TabIndex debe ser cero o superior para que los usuarios del teclado puedan desplazarse hasta él.
• Los indicadores de foco deben ser claramente visibles. Use FocusedBorderColor y FocusedBorderThickness para conseguirlo.

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).