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

ContextMenu контроль

  • Стаття

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

Нотатка

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

Керування контекстним меню.

Опис

Контекстне меню (ContextMenu) — це список команд, заснованих на контексті вибору, наведення курсору миші або фокусування на клавіатурі. Вони є одними з найефективніших і поширених робочих областей команд і можуть бути використані в різних місцях.

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

Властивості

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

Властивість Опис
Items Елементи дії для відтворення. Перший елемент вважається кореневим елементом.

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

Ім'я Опис
ItemDisplayName Коротке ім’я елемента меню.
ItemKey Ключ, який використовується для позначення вибраного елемента і під час додавання вкладених елементів. Ключі мають бути унікальними.
ItemEnabled Встановіть значення false, якщо параметр вимкнуто.
ItemVisible Встановіть значення false, якщо параметр не відображається.
ItemChecked Встановіть значення true, якщо параметр перевірено.
ItemIconName Використовувана піктограма Fluent UI (див. піктограми Fluent UI)
ItemIconColor Колір для відтворення піктограми як (наприклад, з іменем, rgb або шістнадцятковим значенням).
ItemIconOnly Не відображати текстовий надпис — лише піктограма.
ItemHeader Відтворення елемента як заголовка розділу. Якщо є елементи, для яких для ItemParentKey встановлено ключ елемента, то їх буде додано як семантично згруповані елементи в цьому розділі.
ItemTopDivider Відображати роздільник у верхній частині розділу.
ItemDivider Відтворення елемента як роздільника розділу або якщо елемент є заголовком (ItemHeader = true), указує, чи слід відтворити роздільник у нижній частині розділу.
ItemParentKey Відтворення параметра як дочірнього елемента іншого параметра.

Нотатка

  • ItemIconColor перевизначає значення теми компонента та ігнорує інші кольори стану (наприклад, вимкнено).
  • ItemHeader і ItemDivider має бути встановлено значення true, щоб відобразитися як роздільник. Якщо для параметра встановлено значення false, очікуватимуться інші значення, і вони відтворитимуться пустими.
  • Додавання ItemChecked властивості та поведінки пунктів підменю запобігатиме закриттю підменю після натискання.

Приклад

Приклад формули Power Fx для Items

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )

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

Властивість Опис
Theme Приймає рядок JSON, створений за допомогою конструктора тем Fluent UI (windows.net). Якщо залишити це значення пустим, використовуватиметься тема, визначена Power Apps. Якщо залишити це значення пустим, використовуватиметься тема, визначена Power Apps. Див. використання тем, щоб отримати вказівки щодо налаштування.
Chevron Показати або приховати кутові шеврони в кореневій кнопці
IconColor Необов'язково. колір піктограми в кнопці контекстного меню.
HoverIconColor Необов'язково. колір піктограми в разі наведення курсору на кнопку контекстного меню.
IconSize Необов'язково. У пікселях розмір піктограми кнопки контекстного меню.
FontSize Необов'язково. У пікселях розмір тексту кнопки контекстного меню.
FontColor Необов'язково. колір тексту в кнопці контекстного меню.
HoverFontColor Необов'язково. колір тексту в разі наведення курсору на кнопку контекстного меню.
FillColor Необов'язково. колір фону кнопки контекстного меню.
HoverFillColor Необов'язково. колір фону в разі наведення курсору на кнопку контекстного меню.
TextAlignment Вирівнювання тексту на кнопці. Можливі значення: по центру, ліворуч або праворуч
AccessibilityLabel Підпис aria-label для невізуальних екранів

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

Властивість Опис
InputEvent Подія, яку потрібно надіслати елементу керування. Наприклад, SetFocus. Див. нижче.

Поведінка

Підтримує SetFocus як InputEvent.

Налаштування поведінки «У разі вибору»

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

Замініть значення false відповідними виразами мовою Power Fx.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Установлення фокуса на елементі керування

Коли з’являється нове діалогове вікно, а фокус за замовчуванням має бути на елементі керування, потрібно чітко встановити фокус.

Щоб здійснювати виклики події введення, ви можете встановити змінну контексту, пов’язану з властивістю "Подія введення", у рядок, що починається з SetFocus і за який слідує випадковий елемент. Це необхідно для того, щоб програма розпізнала це як зміну.

Наприклад,

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

Потім контекстну змінну ctxResizableTextareaEvent можливо прив'язати до властивості Input Event.

Обмеження

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