CommandBar control (vista previa)

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 de CommandBar.

Descripción

CommandBar es una superficie que alberga comandos que operan sobre el contenido de la ventana, el panel o la región principal 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

Propiedad 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 visible 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 se puede usar como un menú desplegable emergente.
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 Mostrar la opción en los elementos desbordados.
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 Muestra un separador 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 ejemplo de Power Fx 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

Propiedad 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 del evento

Propiedad Descripción
InputEvent Un evento para enviar al control. por ejemplo, SetFocus.

Comportamiento

Soporta SetFocus como un InputEvent.

Configurar el comportamiento de 'On Select'

Use la fórmula Switch() en la propiedad OnSelect del componente para configurar acciones específicas para cada elemento, tomando como valor de ItemKey el ItemKey seleccionado del control.

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.

  • Last updated on