头部专业版

GitHub
一个响应式头部组件。

用法

Header 组件渲染一个 <header> 元素。其高度由 CSS 变量 --ui-header-height 定义，您可以通过在 CSS 中覆盖它来定制高度。

:root {
  --ui-header-height: --spacing(16);
}

使用 left、default 和 right 插槽来定制头部，使用 body 或 content 插槽来定制头部菜单。

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/getting-started',
    active: route.path.startsWith('/getting-started')
  },
  {
    label: 'Components',
    to: '/components',
    active: route.path.startsWith('/components')
  },
  {
    label: 'Roadmap',
    to: '/roadmap'
  },
  {
    label: 'Figma',
    to: 'https://www.figma.com/community/file/1288455405058138934',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

<template>
  <UHeader>
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>

    <UNavigationMenu :items="items" />

    <template #right>
      <UColorModeButton />

      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <UButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </UTooltip>
    </template>
  </UHeader>
</template>
在此示例中，我们使用 NavigationMenu 组件在中心渲染头部链接。

标题

使用 title 属性更改头部的标题。默认为 Nuxt UI Pro。

<template>
  <UHeader title="Nuxt UI Pro" />
</template>

您还可以使用 title 插槽添加您自己的徽标。

<template>
  <UHeader>
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>
  </UHeader>
</template>

目标链接

使用 to 属性更改标题的链接。默认为 /。

<template>
  <UHeader to="/getting-started" />
</template>

您还可以使用 left 插槽完全覆盖该链接。

<template>
  <UHeader>
    <template #left>
      <NuxtLink to="/getting-started">
        <Logo class="h-6 w-auto" />
      </NuxtLink>
    </template>
  </UHeader>
</template>

模式

使用 mode 属性更改头部菜单的模式。默认为 modal。

使用 body 插槽填充菜单主体（头部下方）或 content 插槽填充整个菜单。

您可以使用 menu 属性定制头部菜单，它将根据您选择的模式进行调整。
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/getting-started',
  icon: 'i-lucide-book-open',
  active: route.path.startsWith('/getting-started')
}, {
  label: 'Components',
  to: '/components',
  icon: 'i-lucide-box',
  active: route.path.startsWith('/components')
}, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
}, {
  label: 'Figma',
  icon: 'i-simple-icons-figma',
  to: 'https://www.figma.com/community/file/1288455405058138934',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

<template>
  <UHeader>
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>

    <UNavigationMenu :items="items" />

    <template #right>
      <UColorModeButton />

      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <UButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </UTooltip>
    </template>

    <template #body>
      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </UHeader>
</template>

切换按钮

使用 toggle 属性定制在移动设备上显示的切换按钮。

您可以传递 Button 组件的任何属性进行定制。

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/getting-started',
  icon: 'i-lucide-book-open',
  active: route.path.startsWith('/getting-started')
}, {
  label: 'Components',
  to: '/components',
  icon: 'i-lucide-box',
  active: route.path.startsWith('/components')
}, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
}, {
  label: 'Figma',
  icon: 'i-simple-icons-figma',
  to: 'https://www.figma.com/community/file/1288455405058138934',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

<template>
  <UHeader
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full'
    }"
  >
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>

    <UNavigationMenu :items="items" />

    <template #right>
      <UColorModeButton />

      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <UButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </UTooltip>
    </template>

    <template #body>
      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </UHeader>
</template>

切换按钮位置

使用 toggle-side 属性更改切换按钮的位置。默认为 right。

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/getting-started',
  icon: 'i-lucide-book-open',
  active: route.path.startsWith('/getting-started')
}, {
  label: 'Components',
  to: '/components',
  icon: 'i-lucide-box',
  active: route.path.startsWith('/components')
}, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
}, {
  label: 'Figma',
  icon: 'i-simple-icons-figma',
  to: 'https://www.figma.com/community/file/1288455405058138934',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

<template>
  <UHeader toggle-side="left">
    <template #title>
      <Logo class="h-6 w-auto" />
    </template>

    <UNavigationMenu :items="items" />

    <template #right>
      <UColorModeButton />

      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <UButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </UTooltip>
    </template>

    <template #body>
      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </UHeader>
</template>

示例

在 app.vue 中

在您的 app.vue 或布局中使用 Header 组件

app.vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/getting-started',
  active: route.path.startsWith('/getting-started')
}, {
  label: 'Components',
  to: '/components',
  active: route.path.startsWith('/components')
}, {
  label: 'Roadmap',
  to: '/roadmap'
}, {
  label: 'Figma',
  to: 'https://www.figma.com/community/file/1288455405058138934',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

<template>
  <UApp>
    <UHeader>
      <template #title>
        <Logo class="h-6 w-auto" />
      </template>

      <UNavigationMenu :items="items" />

      <template #right>
        <UColorModeButton />

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

      <template #body>
        <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>

    <UFooter />
  </UApp>
</template>

API

属性 (Props)

属性 (Prop)默认值类型
as

'header'

any

此组件应渲染成的元素或组件。

open

boolean

title

'Nuxt UI Pro'

string

to

'/'

string

mode

'modal'

"modal" | "slideover" | "drawer"

头部菜单的模式。

menu

ModalProps | SlideoverProps | DrawerProps

头部菜单组件的属性。

toggle

true

boolean | Partial<ButtonProps>

自定义当使用 content 插槽时显示的用于打开头部菜单的切换按钮。{ color: 'neutral', variant: 'ghost' }

toggleSide

'right'

"right" | "left"

切换按钮渲染在哪一侧。

ui

{ root?: ClassNameValue; container?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; ... 5 more ...; body?: ClassNameValue; }

插槽

插槽类型
title

{}

left

{}

default

{}

right

{}

toggle

{ open: boolean; toggle: () => void; }

top

{}

bottom

{}

body

{}

content

{}

事件

事件类型
update:open

boolean

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    header: {
      slots: {
        root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
        container: 'flex items-center justify-between gap-3 h-full',
        left: 'lg:flex-1 flex items-center gap-1.5',
        center: 'hidden lg:flex',
        right: 'flex items-center justify-end lg:flex-1 gap-1.5',
        title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
        toggle: 'lg:hidden',
        content: 'lg:hidden',
        overlay: 'lg:hidden',
        header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
        body: 'p-4 sm:p-6 overflow-y-auto'
      },
      variants: {
        toggleSide: {
          left: {
            toggle: '-ms-1.5'
          },
          right: {
            toggle: '-me-1.5'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        header: {
          slots: {
            root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
            container: 'flex items-center justify-between gap-3 h-full',
            left: 'lg:flex-1 flex items-center gap-1.5',
            center: 'hidden lg:flex',
            right: 'flex items-center justify-end lg:flex-1 gap-1.5',
            title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
            toggle: 'lg:hidden',
            content: 'lg:hidden',
            overlay: 'lg:hidden',
            header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
            body: 'p-4 sm:p-6 overflow-y-auto'
          },
          variants: {
            toggleSide: {
              left: {
                toggle: '-ms-1.5'
              },
              right: {
                toggle: '-me-1.5'
              }
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        header: {
          slots: {
            root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
            container: 'flex items-center justify-between gap-3 h-full',
            left: 'lg:flex-1 flex items-center gap-1.5',
            center: 'hidden lg:flex',
            right: 'flex items-center justify-end lg:flex-1 gap-1.5',
            title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
            toggle: 'lg:hidden',
            content: 'lg:hidden',
            overlay: 'lg:hidden',
            header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
            body: 'p-4 sm:p-6 overflow-y-auto'
          },
          variants: {
            toggleSide: {
              left: {
                toggle: '-ms-1.5'
              },
              right: {
                toggle: '-me-1.5'
              }
            }
          }
        }
      }
    })
  ]
})

FormField

用于表单元素的包装器，提供验证和错误处理。

Icon

用于显示来自 Iconify 的任何图标的组件。