CommandBar control (підготовча версія)

Стаття
03/21/2023

Елемент керування для введення команд.

Нотатка

Повна документація та вихідний код із репозиторію компонентів коду GitHub.

Керування CommandBar.

Опис

CommandBar — це поверхня, на якій розміщені команди, що діють над вмістом вікна, панелі або батьківського елемента, над якою він розташований.

Цей компонент коду забезпечує обгортку елемента керування Fluent UI CommandBar для використання в компонованих програмах та на користувацьких сторінках.

Властивості

Ключові властивості

Властивість	Опис
`Items`	Елементи дії для відображення

Структура елементів

Кожен елемент використовує наведену нижче схему, щоб візуалізувати дані в компоненті.

Ім'я	Опис
`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"
    }
)

Властивості стилю

Властивість	Опис
`Theme`	Приймає рядок JSON, створений за допомогою конструктора тем Fluent UI (windows.net). Якщо залишити це значення пустим, використовуватиметься тема, визначена Power Apps. Див. використання тем, щоб отримати вказівки щодо налаштування.
`AccessibilityLabel`	Підпис aria-label для невізуальних екранів

Властивості події

Властивість	Опис
`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 можливо прив'язати до властивості «Вхідна подія».

Обмеження

Цей компонент коду можна використовувати лише в компонованих програмах і настроюваних сторінках.

Перегляньте інші примітки в розділі Проблеми проектування компонентів.

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