标题 - Nuxt UI Pro - Nuxt 框架

用法

使用 links 属性在标题中心显示链接列表。如果这些链接有子链接，则会转换为样式化的 Popover。您也可以使用 #left、#center 和 #right 插槽对其进行进一步自定义。

默认情况下，左侧将显示一个标记为 Nuxt UI Pro 的链接，该链接指向 / 路由。您可以使用 to 属性更改链接，并使用 #logo 插槽放置您自己的徽标。如果您想完全覆盖它，请使用 #left 插槽。

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

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

const links = [{
  label: 'Docs',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro'
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: '/releases'
}]
</script>

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

    <template #right>
      <UColorModeButton />

      <UButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" color="gray" variant="ghost" />
    </template>

    <template #panel>
      <UNavigationTree :links="mapContentNavigation(navigation)" />
    </template>
  </UHeader>
</template>

links 属性将使用 HeaderLinks 组件显示在标题的中心。

您可以使用 #center 插槽覆盖此操作，例如，您可以在那里放置 ContentSearchButton 组件，它将完美地适应。

<template>
  <UHeader>
    <template #center>
      <UContentSearchButton />
    </template>
  </UHeader>
</template>

在移动设备上，#center 插槽中的链接将隐藏，并显示一个汉堡菜单。

如果您覆盖了 #center 插槽，则需要添加 hidden lg:flex 类。

要自定义点击汉堡菜单时打开的面板，请使用 #panel 插槽。例如，您可以在那里放置 NavigationTree 组件和/或 AsideLinks 组件，它们也将会完美地适应。

<template>
  <UHeader>
    <template #panel>
      <UAsideLinks :links="links" />

      <UNavigationTree :links="mapContentNavigation(navigation)" />
    </template>
  </UHeader>
</template>

查看此文档的移动版以了解其外观。

插槽

panel

{}

logo

{}

top

{}

left

{}

center

{}

right

{}

panel-button

{ open: any; }

bottom

{}

属性

string

"/"

title

string

undefined

links

HeaderLink[]

[]

any

{}

配置

{
  wrapper: 'bg-background/75 backdrop-blur border-b border-gray-200 dark:border-gray-800 -mb-px sticky top-0 z-50',
  container: 'flex items-center justify-between gap-3 h-[--header-height]',
  left: 'lg:flex-1 flex items-center gap-1.5',
  center: '',
  right: 'flex items-center justify-end lg:flex-1 gap-1.5',
  logo: 'flex-shrink-0 font-bold text-xl text-gray-900 dark:text-white flex items-end gap-1.5',
  panel: {
    wrapper: 'fixed inset-0 z-50 overflow-y-auto bg-background lg:hidden',
    header: 'px-4 sm:px-6',
    body: 'px-4 sm:px-6 pt-3 pb-6'
  },
  button: {
    base: 'lg:hidden',
    icon: {
      open: 'i-heroicons-bars-3-20-solid',
      close: 'i-heroicons-x-mark-20-solid'
    }
  }
}

FooterLinks

在页脚显示的链接列表。

HeaderLinks

在标题显示的链接列表。