Usar los controles de Fluent UI

Crear aplicaciones que se ven muy bien en Microsoft Teams será más fácil con nuestros nuevos componentes. Basados en el marco de trabajo Fluent UI, los nuevos componentes se verán geniales con los estilos de Teams y se ajustarán automáticamente al tema predeterminado de Teams. Los nuevos controles son Botón, Casilla, Cuadro combinado, Selector de fecha, Etiqueta, Grupo de opciones, Calificación, Control deslizante, Cuadro de texto y Control de alternancia.

Echemos un vistazo a cada control de Fluent UI y sus propiedades más útiles. Para obtener una lista completa de controles y propiedades de Power Apps, vaya a Controles y propiedades en Power Apps.

Botón

Un control en el que el usuario puede seleccionar 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 seleccione el control.

Propiedades de la clave

BotónType: el estilo del botón para mostrar, Estándar o Primario. El valor predeterminado es Estándar.

OnSelect: indica cómo responde la aplicación cuando el usuario selecciona un control.

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

Casilla ver.

Un control que el usuario puede seleccionar o borrar para establecer su valor en true o false.

Descripción

El usuario puede especificar un valor booleano mediante este conocido control, que se ha usado ampliamente en la interfaz de usuario.

Propiedades de la clave

Lado del cuadro: el lado del control en el que se muestra la casilla de verificación.

Etiqueta: texto que aparece en un control.

Activado: si el control está seleccionado o no.

Cuadro combinado

Un control que permite a los usuarios seleccionar entre las opciones proporcionadas. Admite tanto la búsqueda como la selección múltiple.

Descripción

Un control Cuadro combinado permite al usuario buscar los elementos para seleccionar.

El modo de selección individual o múltiple se configura mediante la propiedad SelectMultiple.

Propiedades de la clave

Items: el origen de datos del que se puede elegir.

DefaultSelectedItems: los elementos seleccionados inicialmente, antes de que el usuario interactúe con el control.

SelectMultiple: si el usuario puede seleccionar un solo elemento o varios.

IsSearchable: indica si el usuario puede buscar elementos antes de realizar la selección.

Selector de fecha

Un control en el que el usuario puede seleccionar para especificar una fecha.

Descripción

Si agrega un control Selector de fecha en lugar de un control Entrada de texto, ayuda a garantizar que el usuario especifique una fecha en el formato correcto.

Propiedades de la clave

Valor: la fecha seleccionada actualmente en un control de fecha. Esta fecha está representada en la hora local.

Etiqueta

Cuadro que muestra los datos como texto, números, fechas o moneda.

Descripción

En una etiqueta se muestran datos que se especifican como una cadena literal de texto, o como una fórmula que se analiza como cadena de texto. Las etiquetas suelen aparecer fuera de cualquier otro control (por ejemplo, como encabezado que identifica una pantalla), como una etiqueta que identifica otro control (por ejemplo, un control Calificación o Audio) o en una galería para mostrar un tipo específico de información sobre un elemento.

Propiedades de la clave

Color: el color del texto en un control.

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

Text: texto que aparece en un control.

Grupo de opciones

Control de entrada que muestra varias opciones entre las que los usuarios pueden seleccionar solo una cada vez.

Descripción

Un control Grupo de opciones, un control de entrada HTML estándar, se aprovecha mejor con solo unas cuantas opciones mutuamente excluyentes.

Propiedades de la clave

Items: origen de datos que aparece en un control como una galería, una lista o un gráfico.

Selected: registro de datos que representa el objeto seleccionado.

Calificación

Un control con el que los usuarios pueden indicar un valor entre 0 y el número máximo que especifique.

Descripción

En este control el usuario puede indicar, por ejemplo, cuánto le ha gustado algo seleccionando un cierto número de estrellas.

Propiedades de la clave

Valor: el valor inicial de un control antes de que lo cambie el usuario.

Max: el valor máximo para el que el usuario puede establecer un control deslizante o una clasificación.

Control deslizante

Un control con el que el usuario puede especificar un valor arrastrando un controlador.

Descripción

El usuario puede indicar un valor comprendido entre un valor mínimo y un máximo que puede especificar arrastrando el controlador de un control deslizante de izquierda a derecha o de arriba a abajo, dependiendo de la dirección que desee.

Propiedades de la clave

Max: el valor máximo para el que el usuario puede establecer un control deslizante o una clasificación.

Min: el valor mínimo para el que el usuario puede establecer un control deslizante.

Valor: el valor de un control de entrada.

Diseño: si un control se muestra horizontal o verticalmente.

Mostrar valor: si un control debe mostrar el valor.

Cuadro de texto

Un cuadro en el que el usuario puede introducir texto, números y otros datos.

Descripción

El usuario puede especificar datos escribiendo en un control Cuadro de texto. Dependiendo de cómo configure la aplicación, puede que esos datos se agreguen a un origen de datos, usado para calcular un valor temporal, o que se incorporen de alguna otra manera.

Propiedades de la clave

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

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

Alternancia

Control que el usuario puede activar o desactivar al mover su identificador.

Descripción

Un control Control de alternancia está diseñado para la interfaz de usuario moderna, pero se comporta de la misma manera que una casilla de verificación.

Propiedades de la clave

Activado: si el control está seleccionado o no.

OffText: el texto del estado desactivado.

OnText: el texto del estado activado.

Diferencia entre Fluent UI y los controles clásicos

Las propiedades de los controles se han simplificado para facilitar su uso. La siguiente tabla enumera las diferencias entre los controles Fluent UI y los nombres de propiedad de los controles clásicos.

Tipo de control	Clásico	Fluent UI
Botón	Rellenar Fondo TabIndex	ColorFill ColorBackground AcceptsFocus
Casilla ver.	Valor predeterminado TabIndex	Activadas AcceptsFocus
Cuadro combinado	InputTextPlaceholder TabIndex	Texto AcceptsFocus
Selector de fecha	SelectedDate TabIndex	valor AcceptsFocus
Etiqueta	Tamaño	FontSize
Grupo de opciones	TabIndex	AcceptsFocus
Calificación	Valor predeterminado TabIndex	valor AcceptsFocus
Control deslizante	Valor predeterminado TabIndex	valor AcceptsFocus
Cuadro de texto	Color Valor predeterminado Rellenar SpellCheck TabIndex	ColorText valor ColorBackground EnableSpellCheck AcceptsFocus
Alternancia	Tamaño Valor predeterminado TabIndex	FontSize Activadas AcceptsFocus

Consultar también

Crear aplicaciones adicionales
Entender Power Apps Studio

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).