Nuxt UI v3-alpha 已发布！

试用
组件

垂直导航

GitHub
显示垂直链接列表。

使用

将一个数组传递给 VerticalNavigation 组件的 links 属性。每个链接可以包含以下属性

  • label - 链接的标签。
  • labelClass - 链接标签的类名。
  • icon - 链接的图标。
  • iconClass - 链接图标的类名。
  • avatar - 链接的头像。您可以传递 Avatar 组件的所有属性。
  • badge - 显示在标签旁边的徽章。您可以传递 Badge 组件的所有属性。
  • click - 链接的点击处理函数。

您还可以传递 NuxtLink 组件的任何属性，例如 to、exact 等。

<script setup lang="ts">
const links = [{
  label: 'Profile',
  avatar: {
    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  },
  badge: 100
}, {
  label: 'Installation',
  icon: 'i-heroicons-home',
  to: '/getting-started/installation'
}, {
  label: 'Vertical Navigation',
  icon: 'i-heroicons-chart-bar',
  to: '/components/vertical-navigation'
}, {
  label: 'Command Palette',
  icon: 'i-heroicons-command-line',
  to: '/components/command-palette'
}]
</script>

<template>
  <UVerticalNavigation :links="links" />
</template>

部分

将您的导航链接分组到不同的部分，用分隔线隔开。您可以通过将一个数组数组传递给 VerticalNavigation 组件的 links 属性来实现。

<script setup lang="ts">
const links = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
    },
    badge: 100
  }, {
    label: 'Installation',
    icon: 'i-heroicons-home',
    to: '/getting-started/installation'
  }, {
    label: 'Vertical Navigation',
    icon: 'i-heroicons-chart-bar',
    to: '/components/vertical-navigation'
  }, {
    label: 'Command Palette',
    icon: 'i-heroicons-command-line',
    to: '/components/command-palette'
  }], [{
    label: 'Examples',
    icon: 'i-heroicons-light-bulb'
  }, {
    label: 'Help',
    icon: 'i-heroicons-question-mark-circle'
  }]
]
</script>

<template>
  <UVerticalNavigation :links="links" />
</template>

插槽

您可以使用插槽自定义链接的显示。

默认

使用 #default 插槽自定义链接标签。您将在插槽作用域中访问到 link 和 isActive 属性。

<script setup lang="ts">
const links = [{
  label: 'Vertical Navigation',
  to: '/components/vertical-navigation'
}, {
  label: 'Command Palette',
  to: '/components/command-palette'
}, {
  label: 'Table',
  to: '/components/table'
}]
</script>

<template>
  <UVerticalNavigation :links="links">
    <template #default="{ link }">
      <span class="group-hover:text-primary relative">{{ link.label }}</span>
    </template>
  </UVerticalNavigation>
</template>

头像

使用 #avatar 插槽自定义链接头像。您将在插槽作用域中访问到 link 和 isActive 属性。

<script setup lang="ts">
const links = [{
  avatar: {
    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',
    alt: ''
  },
  label: 'benjamincanac',
  to: 'https://github.com/benjamincanac',
  target: '_blank'
}, {
  avatar: {
    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',
    alt: ''
  },
  label: 'Atinux',
  to: 'https://github.com/Atinux',
  target: '_blank'
}, {
  avatar: {
    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',
    alt: ''
  },
  label: 'smarroufin',
  to: 'https://github.com/smarroufin',
  target: '_blank'
}]
</script>

<template>
  <UVerticalNavigation :links="links">
    <template #avatar="{ link }">
      <UAvatar v-bind="link.avatar" size="2xs" loading="lazy" />
    </template>
  </UVerticalNavigation>
</template>

图标

使用 #icon 插槽自定义链接图标。您将在插槽作用域中访问到 link 和 isActive 属性。

<script setup lang="ts">
const types = {
  bug: {
    icon: 'i-heroicons-bug-ant-20-solid',
    color: 'text-red-500'
  },
  docs: {
    icon: 'i-heroicons-document-text-20-solid',
    color: 'text-blue-500'
  },
  lock: {
    icon: 'i-heroicons-lock-closed-20-solid',
    color: 'text-gray dark:text-white'
  },
  default: {
    icon: 'i-heroicons-question-mark-circle-20-solid',
    color: 'text-green-500'
  }
}
const links = [{
  label: 'UDropdown and UPopover dropdown menu, dropdown will be obscured',
  type: 'bug'
}, {
  label: 'Uncaught (in promise) ReferenceError: ref is not defined',
  type: 'lock'
}, {
  label: 'Fully styled and customizable components for Nuxt.',
  type: 'docs'
}, {
  label: 'Can I pass a tailwind color to UNotifications with `toast.add()` ?'
}]
</script>

<template>
  <UVerticalNavigation
    :links="links"
    :ui="{ wrapper: 'truncate' }"
  >
    <template #icon="{ link }">
      <UIcon v-if="link.type" :name="types[link.type].icon" :class="types[link.type].color" class="text-base" />
      <UIcon v-else :name="types.default.icon" :class="types.default.color" class="text-base" />
    </template>
  </UVerticalNavigation>
</template>

徽章

使用 #badge 插槽自定义链接徽章。您将在插槽作用域中访问到 link 和 isActive 属性。

<script setup lang="ts">
const links = [{
  label: '.github',
  icon: 'i-heroicons-folder-20-solid',
  badge: 'chore(github): use pnpm 8',
  time: 'last month'
}, {
  label: '.editorconfig',
  icon: 'i-heroicons-document-solid',
  badge: 'Initial commit',
  time: '2 years ago'
}, {
  label: '.package.json',
  icon: 'i-heroicons-document-solid',
  badge: 'chore(deps): bump',
  time: '16 hours ago'
}]
</script>

<template>
  <UVerticalNavigation
    :links="links"
    class="w-full"
    :ui="{
      label: 'truncate relative text-gray-900 dark:text-white flex-initial w-32 text-left'
    }"
  >
    <template #badge="{ link }">
      <div class="flex-1 flex justify-between relative truncate">
        <div>{{ link.badge }}</div>
        <div>{{ link.time }}</div>
      </div>
    </template>
  </UVerticalNavigation>
</template>

属性

ui
{ wrapper?: string; base?: string; ring?: string; padding?: string; width?: string; rounded?: string; font?: string; size?: string; active?: string; inactive?: string; label?: string; icon?: DeepPartial<{ base: string; active: string; inactive: string; }, any>; avatar?: DeepPartial<...>; badge?: DeepPartial<...>; di...
{}
links
VerticalNavigationLink[] | VerticalNavigationLink[][]
[]

配置

{
  wrapper: 'relative',
  base: 'group relative flex items-center gap-1.5 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
  padding: 'px-2.5 py-1.5',
  width: 'w-full',
  rounded: 'rounded-md',
  font: 'font-medium',
  size: 'text-sm',
  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
  label: 'truncate relative',
  icon: {
    base: 'flex-shrink-0 w-5 h-5 relative',
    active: 'text-gray-700 dark:text-gray-200',
    inactive: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
  },
  avatar: {
    base: 'flex-shrink-0',
    size: '2xs'
  },
  badge: {
    base: 'flex-shrink-0 ms-auto relative rounded',
    color: 'gray',
    variant: 'solid',
    size: 'xs'
  },
  divider: {
    wrapper: {
      base: 'p-2'
    }
  }
}

示例

以下示例说明了如何通过利用 VerticalNavigation 组件的 ui 属性自定义其外观。

<script setup lang="ts">
const links = [{
  label: 'Introduction',
  to: '/getting-started'
}, {
  label: 'Installation',
  to: '/getting-started/installation'
}, {
  label: 'Theming',
  to: '/getting-started/theming'
}, {
  label: 'Shortcuts',
  to: '/getting-started/shortcuts'
}]
</script>

<template>
  <UVerticalNavigation
    :links="links"
    :ui="{
      wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
      base: 'group block border-s -ms-px leading-6 before:hidden',
      padding: 'p-0 ps-4',
      rounded: '',
      font: '',
      ring: '',
      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
    }"
  />
</template>

工具提示

显示悬停在元素旁边时出现的提示内容。

Nuxt UI 专业版

一个高级 Vue 组件集合，可在几分钟内创建精美且响应式 Nuxt 应用程序。