导航树 - Nuxt UI Pro

用法

将链接树及其子链接传递给 links 属性，这将在存在子链接时自动创建一个手风琴，否则将显示一个简单链接。

使用 mapContentNavigation 实用程序将 @nuxt/content 导航转换为 @nuxt/ui-pro 链接。

<script lang="ts" setup>
import type { NavItem } from '@nuxt/content'

const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
</script>

<template>
  <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
</template>

多个

您可以通过将 multiple 属性设置为 false 来禁止同时打开多个手风琴项目（默认为 true）。

<template>
  <UNavigationTree :links="links" :multiple="false" />
</template>

默认打开

您可以将 default-open 属性设置为 true，以自动打开与当前路由匹配的树（默认为 false）。

<template>
  <UNavigationTree :links="links" default-open />
</template>

您通常会在侧边栏组件或页眉的 #panel 插槽中使用此组件。

layouts/docs.vue

<template>
  <UContainer>
    <UPage>
      <template #left>
        <UAside>
          <UNavigationTree :links="mapContentNavigation(navigation)" />
        </UAside>
      </template>

      <slot />
    </UPage>
  </UContainer>
</template>

components/Header.vue

<template>
  <UHeader :links="links">
    <template #logo>
      <Logo class="w-auto h-6" />
    </template>

    <template #right>
      <UColorModeButton />
    </template>

    <template #panel>
      <UNavigationTree :links="mapContentNavigation(navigation)" default-open :multiple="false" />
    </template>
  </UHeader>
</template>

属性

DeepPartial<{ wrapper: string; accordion: {}; links: {}; }>

{}

defaultOpen

number | boolean

undefined

links

NavigationTree[]

[]

level

number

0

multiple

boolean

true

配置

{
  wrapper: 'space-y-3',
  accordion: {},
  links: {}
}

导航链接

在导航树中显示的链接列表。

页面

为您的页面提供动态网格布局。