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

Nav контроль

  • Статья

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

Заметка

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

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

Description

Панель навигации (Nav) содержит ссылки на основные разделы приложения или сайта.

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

Заметка

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

Свойства

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

Свойство Description
Selected key Ключ для выбора. Это будет обновляться через событие OnChange, когда пользователь взаимодействует с элементом управления.
Items Обязательное. Таблица элементов источника данных для отображения.
Fields Обязательное. Поля, которые включены из набора данных.

Items характеристики

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

Имя. Description
ItemDisplayName Отображаемое имя команды/вкладки/элемента меню
ItemKey Клавиша, которая используется для указания того, какой элемент выбран, и при добавлении подэлементов. Клавиши должны быть уникальными.
ItemEnabled Установите значение false, если параметр отключен
ItemVisible Установите значение false, если параметр не виден
ItemIconName Значок Fluent UI для использования (см. Значки Fluent UI)
ItemIconColor Цвет для отображения значка (например, именованный, rgb или шестнадцатеричное значение)
ItemIconOnly Не показывать текстовую метку — только значок
ItemParentKey Отображать этот параметр как дочерний элемент другого параметра
ItemExpanded Установите значение false или true, если группа должна оставаться свернутой или развернутой, соответственно.

Пример:

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

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

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

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

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

Поведение

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

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

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

Замените значения false на соответствующие выражения на языке Power Fx.

  Switch( Self.Selected.ItemKey,

    /* Action for ItemKey 1 */
    "1", false,

    /* Action for ItemKey 2 */
    "2", false,

    /* Action for ItemKey 3 */
    "3", false,

    /* Action for ItemKey 4 */
    "4", false,

    /* Action for ItemKey 5 */
    "5", false,

    /* Default action */
        false
  )

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

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

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

Например

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

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

Ограничения

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