CommandBar control (versión preliminar)

Artículo
03/21/2023

Un control usado para ingresar comandos.

Nota

La documentación completa y el código fuente se encuentran en el repositorio de componentes de código GitHub.

Control CommandBar.

Description

CommandBar es una superficie que alberga comandos que operan sobre el contenido de la ventana, panel o región elemento primario sobre la que se encuentra.

Este componente de código proporciona un envoltorio alrededor del control CommandBar de Fluent UI para su uso en aplicaciones de lienzo y páginas personalizadas.

Propiedades

Propiedades importantes

Property	Descripción
`Items`	Los elementos de acción para renderizar

Estructura de elementos

Cada elemento utiliza el siguiente esquema para visualizar datos en el componente.

Name	Descripción
`ItemDisplayName`	El nombre para mostrar del elemento de la barra de comandos.
`ItemKey`	La tecla que se debe utilizar al indicar qué elemento está seleccionado y al agregar subelementos. Las teclas deben ser únicas.
`ItemEnabled`	Se establece en falso si la opción está deshabilitada.
`ItemVisible`	Se establece en falso si la opción no está visible.
`ItemChecked`	Establézcalo en verdadero si la opción está marcada (p. ej., botones divididos en una barra de comandos).
`ItemSplit`	Establézcalo en verdadero si se puede hacer clic en la opción y usarla como un menú desplegable desplegable.
`ItemIconName`	El icono de Fluent UI que se debe usar (ver Iconos de Fluent UI)
`ItemIconColor`	El color para representar el icono (p. ej., con nombre, rgb o un valor hexadecimal).
`ItemIconOnly`	No mostrar la etiqueta de texto, solo el icono.
`ItemOverflow`	Establecer en verdadero para el comportamiento de desbordamiento
`ItemOverflow`	Representar la opción en los elementos de desbordamiento.
`ItemFarItem`	Representar la opción en el grupo de elementos lejanos de una barra de comandos.
`ItemHeader`	Representa el eleemnto como encabezado de sección. Si hay elementos que tienen su `ItemParentKey` configurado en la clave de este elemento, se agregan como elementos agrupados semánticamente en esta sección.
`ItemTopDivider`	Representa un divisor en la parte superior de la sección.
`ItemDivider`	Representa el elemento como un divisor de sección, o si el elemento es un encabezado (ItemHeader = true), controla si mostrar un divisor en la parte inferior de la sección.
`ItemParentKey`	Representa la opción como elemento secundario de otra opción.

Nota

ItemIconColor anulará el valor del tema del componente e ignorará otros colores de estado (por ejemplo, deshabilitado).
ItemHeader y ItemDivider debe establecerse en verdadero para representarse como divisor. Si se establece en falso, espera otros valores y se quedará en blanco.

Ejemplo

Fórmula de Power Fx de ejemplo para Items básico:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

Propiedades de estilo

Property	Descripción
`Theme`	Acepta una cadena JSON que se genera usando Diseñador de temas de Fluent UI (windows.net). Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Para obtener ayuda sobre cómo configurarlo vea Tematización.
`AccessibilityLabel`	aria-label para lectores de pantalla

Propiedades de evento

Property	Descripción
`InputEvent`	Evento para enviar al control. por ejemplo, `SetFocus`.

Behavior

Soporta SetFocus como un InputEvent.

Configure el comportamiento "Al seleccionar"

Use la fórmula Cambiar() en la propiedad OnSelect del componente para configurar acciones específicas para cada elemento haciendo referencia al ItemKey seleccionado del control como el valor del interruptor.

Cambie los valores false con expresiones adecuadas en el lenguaje Power Fx.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", false,
  
    /* Default action */
        false
  )

Establecer el foco en el control

Cuando se muestra un nuevo cuadro de diálogo y el enfoque predeterminado debe estar en el control, se necesitará un enfoque establecido explícito.

Para realizar llamadas al evento de entrada, puede establecer una variable de contexto vinculada a la propiedad Evento de entrada en una cadena que comience con SetFocus seguido de un elemento aleatorio para garantizar que la aplicación lo detecte como un cambio.

Fórmula Power Fx de ejemplo:

UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));

La variable de contexto ctxResizableTextareaEvent entonces se vincularía a la propiedad Input Event.

Limitaciones

Este componente de código solo se puede usar en aplicaciones de lienzo y páginas personalizadas.

Ver más notas de limitación en los desafíos de diseño de componentes.

Compartir a través de