CommandBar контроль (предварительная версия)

Статья
03/21/2023

Элемент управления, используемый для ввода команд.

Заметка

Полная документация и исходный код находятся в разделе Репозиторий компонентов кода на GitHub.

Элемент управления CommandBar.

Description

CommandBar представляет собой поверхность, на которой размещаются команды, работающие с содержимым окна, панели или области родительский элемент, над которой она находится.

Этот компонент кода обеспечивает оболочку вокруг элемента управления Fluent UI CommandBar для использования в приложениях на основе холста и на пользовательских страницах.

Свойства

Ключевые свойства

Свойство	Description
`Items`	Элементы действия для визуализации

Структура элементов

Каждый элемент использует приведенную далее схему для визуализации данных в компоненте.

Имя.	Description
`ItemDisplayName`	Отображаемое имя элемента панели команд.
`ItemKey`	Клавиша, которая используется для указания того, какой элемент выбран, и при добавлении подэлементов. Клавиши должны быть уникальными.
`ItemEnabled`	Установите значение false, если параметр отключен.
`ItemVisible`	Установите значение false, если параметр не виден.
`ItemChecked`	Установите значение true, если этот параметр отмечается (например, разделенные кнопки на панели команд).
`ItemSplit`	Установите значение true, если параметр можно щелкнуть и использовать в качестве раскрывающегося всплывающего меню.
`ItemIconName`	Значок Fluent UI для использования (см. Значки Fluent UI)
`ItemIconColor`	Цвет для отображения значка (например, именованный, rgb или шестнадцатеричное значение).
`ItemIconOnly`	Не показывать текстовую метку — только значок.
`ItemOverflow`	Установите значение true для поведения переполнения
`ItemOverflow`	Отображение параметра в элементах переполнения.
`ItemFarItem`	Отображение параметра в группе дальних элементов панели команд.
`ItemHeader`	Отобразить элемент как заголовок раздела. Если есть элементы, для `ItemParentKey` которых установлен на ключ этого элемента, то они добавляются как семантически сгруппированные элементы в этом разделе.
`ItemTopDivider`	Отображать разграничительную линию над разделом.
`ItemDivider`	Отображать элемент как разделитель разделов — или, если элемент является заголовком (ItemHeader = true), то определяет, отображать ли разделитель в нижней части раздела.
`ItemParentKey`	Отображать этот параметр как дочерний элемент другого параметра.

Заметка

ItemIconColor переопределит значение темы компонента и проигнорирует другие цвета состояния (например, отключено).
ItemHeader и ItemDivider должен быть установлен в значение true для отображения в качестве разделителя. Если установлено значение false, он ожидает другие значения и будет отображаться пустым.

Пример

Пример формулы Power Fx для базовых Items:

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

Свойства стиля

Свойство	Description
`Theme`	Принимает строку JSON, сгенерированную с помощью Конструктора тем Fluent UI (windows.net). Если оставить это поле пустым, будет использоваться тема по умолчанию, определенная Power Apps. Сведения о порядке настройки см. в разделе темы.
`AccessibilityLabel`	Подпись Aria для программы чтения с экрана

Свойства событий

Свойство	Description
`InputEvent`	Событие, которое требуется отправить элементу управления. Например, `SetFocus`.

Поведение

Поддерживает SetFocus как InputEvent.

Настройка поведения «При выборе»

Используйте формулу Switch() в свойстве OnSelect компонента, чтобы настроить определенные действия для каждого элемента, ссылаясь на выбранный ключ ItemKey элемента управления в качестве значения переключателя.

Замените значения false на соответствующие выражения на языке 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
  )

Настройка фокуса на элементе управления

Когда отображается новое диалоговое окно, а фокус по умолчанию должен быть на элементе управления, потребуется явная установка фокуса.

Чтобы совершать вызовы входного события, вы можете установить переменную контекста, связанную со свойством входного события, в строку, начинающуюся с SetFocus, за которым следует случайный элемент, чтобы приложение распознало его как изменение.

Пример формулы Power Fx:

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

Контекстная переменная ctxResizableTextareaEvent затем может быть привязана к свойству Input Event.

Ограничения

Этот компонент кода можно использовать только в приложениях на основе холста и настраиваемых страницах.

Дополнительные примечания об ограничениях см. в проблемах проектирования компонентов.

Поделиться через