astryx-vue

导航标题菜单

@astryxdesign/core v0.7.1 · NavHeadingMenu

使用方法 ​

导航标题旁边那个弹出菜单的容器和条目。NavHeadingMenu 提供 role="menu" 和键盘导航，NavHeadingMenuItem 画里面的每一个可选条目。把它放进 SideNavHeading 或 TopNavHeading 的 menu 插槽即可。

ts
import { NavHeadingMenu } from '@astryx-vue/core/NavMenu'
vue
<script setup lang="ts">
import { NavHeadingMenu, NavHeadingMenuItem } from '@astryx-vue/core/NavMenu'
import { SideNav, SideNavHeading } from '@astryx-vue/core/SideNav'
</script>

<template>
  <SideNav>
    <template #header>
      <SideNavHeading heading="Acme Platform">
        <template #menu>
          <NavHeadingMenu label="Acme Platform" size="lg">
            <NavHeadingMenuItem href="/dashboard" label="控制台" />
            <NavHeadingMenuItem href="/analytics" label="数据分析" />
          </NavHeadingMenu>
        </template>
      </SideNavHeading>
    </template>
  </SideNav>
</template>

解剖

部分说明
菜单导航标题菜单的容器，带菜单语义和键盘导航。
条目菜单里可选的动作，或者一个导航链接。
图标条目文字前面用 Icon 画出来的图标。
用 Text 渲染的条目文字字符串形式的条目文字，交给 Text 渲染。
调用方渲染的条目文字条目文字不是字符串时，内容由调用方直接渲染。
条目说明条目下面那行辅助说明，交给 Text 渲染。