用法

在页面的默认插槽中使用 PageHeader 组件。

<template>
  <UPage>
    <UPageHeader />

    <UPageBody />
  </UPage>
</template>

使用 title、description 和 headline 属性来自定义页眉。

标题

描述

页面

页面标题

一个响应式页面页眉。

<template>
  <UPageHeader
    headline="Page"
    title="PageHeader"
    description="A responsive header for your pages."
  />
</template>

使用 links 属性在页眉右侧添加一些按钮。

标题

描述

页面

页面标题

GitHub

一个响应式页面页眉。

<template>
  <UPageHeader
    headline="Page"
    title="PageHeader"
    description="A responsive header for your pages."
    :links="[{ label: 'GitHub', color: 'white', to: 'https://github.com/nuxt/ui-pro/blob/dev/components/page/PageHeader.vue', target: '_blank', icon: 'i-simple-icons-github' }]"
  />
</template>

使用 icon 属性在标题左侧添加一个图标。

标题

描述

图标

tailwindcss

在几秒钟内将 Tailwind CSS 添加到您的 Nuxt 应用程序，并包含 PurgeCSS 以实现最小 CSS。

<template>
  <UPageHeader
    title="tailwindcss"
    description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
    icon="i-simple-icons-tailwindcss"
  />
</template>

您通常会在 [...slug].vue 页面中使用此组件

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" :links="page.links" />

    <UPageBody prose>
      <ContentRenderer v-if="page.body" :value="page" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

使用 @nuxt/content 时，可以使用 findPageHeadline 或 findPageBreadcrumb 实用程序来设置 headline 属性或插槽。

插槽

标题

{}

图标

{}

标题

{}

链接

{}

描述

{}

默认

{}

属性

图标

字符串

未定义

标题

字符串

未定义

描述

字符串

未定义

DeepPartial<{ wrapper: string; container: string; headline: string; title: string; description: string; icon: { wrapper: string; base: string; }; links: string; }>

{}

链接

(Button & { click?: (...args: any[]) => void; })[]

[]

标题

字符串

未定义

配置

{
  wrapper: 'relative border-b border-gray-200 dark:border-gray-800 py-8',
  container: 'flex flex-col lg:flex-row lg:items-center lg:justify-between',
  headline: 'mb-3 text-sm/6 font-semibold text-primary flex items-center gap-1.5',
  title: 'text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white tracking-tight',
  description: 'mt-4 text-lg text-gray-500 dark:text-gray-400',
  icon: {
    wrapper: 'flex',
    base: 'w-10 h-10 flex-shrink-0 text-primary'
  },
  links: 'flex flex-wrap items-center gap-1.5 mt-4 lg:mt-0'
}

页面网格

一个可自定义的网格，用于在您的页面中显示卡片。

页面英雄区

一个响应式页面英雄区。