通过

Nav 控制

  • 项目

用于提供导航的控件。

备注

GitHub 代码组件存储库中的完整文档和源代码。

Nav 控件。

说明

导航窗格 (Nav) 提供指向应用或站点主要区域的链接。

Nav 代码组件允许从画布应用和自定义页面内使用 Fluent UI Nav 菜单组件。

备注

GitHub 代码组件存储库中有组件源代码和更多信息。

属性

键属性

属性 说明
Selected key 要选择的键。 当用户与控件交互时，此值将通过 OnChange 事件更新。
Items 必需。 要呈现的数据源项表。
Fields 必需。 数据集中包含的字段。

Items 性能

每个项使用以下架构来可视化组件中的数据。

Name 说明
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"
  }
)

样式属性

属性 说明
Theme 接受使用 Fluent UI 主题设计器 (windows.net) 生成的 JSON 字符串。 将此属性留空将使用 Power Apps 定义的默认主题。 有关如何配置的指导，请参阅主题化。
AccessibilityLabel 屏幕阅读器 aria 标签
CollapseByDefault 设置为 True 或 False（开或关），所有导航组将分别保持折叠或展开状态。 保持单个项级别的展开属性。

事件属性

属性 说明
InputEvent 要发送到控件的事件。 例如，SetFocus。 请参阅以下内容。

行为

支持 SetFocus 作为 InputEvent。

配置“选择时”行为

使用组件的 OnSelect 属性中的 Switch() 公式通过引用控件选择的作为切换值的 ItemKey 来配置每个项目的特定操作。

使用 Power Fx 语言的适当表达式替换 false 值。

  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
  )

将焦点设置在控件上

当显示一个新对话，并且默认焦点应在控件上时，需要显式设置焦点。

要调用输入事件，您可以将绑定到 Input Event 属性的上下文变量设置为以 SetFocus 开头、后跟随机元素的字符串，以确保应用将其检测为更改。

例如，

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

上下文变量 ctxResizableTextareaEvent 然后将被绑定到属性 Input Event。

限制

此代码组件只能在画布应用和自定义页面中使用。