PageHeader^PRO

一个用于页面的响应式头部组件。

用法

PageHeader 组件为您的页面显示一个头部。

将其用在 Page 组件的默认插槽内，PageBody 组件之前。

<template>
  <UPage>
    <UPageHeader />

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

标题

使用 title 属性在头部显示标题。

title

<template>
  <UPageHeader title="PageHeader" />
</template>

描述

使用 description 属性在头部显示描述。

description

<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
  />
</template>

Headline

使用 headline 属性在头部显示主标题。

headline

<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
    headline="Components"
  />
</template>

链接

使用 links 属性在头部显示 Button 列表。

<script setup lang="ts">
const links = ref([
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui-pro/tree/v3/src/runtime/components/PageHeader.vue',
    target: '_blank'
  }
])
</script>

<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
    headline="Components"
    :links="links"
  />
</template>

示例

虽然这些示例使用了Nuxt Content，但这些组件可以与任何内容管理系统集成。

在页面内

在页面中使用 PageHeader 组件显示页面头部

pages/[...slug].vue

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

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})
</script>

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

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <UContentSurround :surround="surround" />
    </UPageBody>

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

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`title`		`string`
`description`		`string`
`links`		`ButtonProps[]` 在标题旁显示 Button 列表。 `{ color: 'neutral', variant: 'outline' }`
`headline`		`string`
`ui`		`{ root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; headline?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; links?: ClassNameValue; }`

插槽

插槽	类型
`headline`	`{}`
`title`	`{}`
`description`	`{}`
`links`	`{}`
`默认`	`{}`

主题

app.config.ts

export default defineAppConfig({
  uiPro: {
    pageHeader: {
      slots: {
        root: 'relative border-b border-default py-8',
        container: '',
        wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
        headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
        title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
        description: 'text-lg text-pretty text-muted',
        links: 'flex flex-wrap items-center gap-1.5'
      },
      variants: {
        title: {
          true: {
            description: 'mt-4'
          }
        }
      }
    }
  }
})

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: {
        pageHeader: {
          slots: {
            root: 'relative border-b border-default py-8',
            container: '',
            wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
            headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
            title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
            description: 'text-lg text-pretty text-muted',
            links: 'flex flex-wrap items-center gap-1.5'
          },
          variants: {
            title: {
              true: {
                description: 'mt-4'
              }
            }
          }
        }
      }
    })
  ]
})

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: {
        pageHeader: {
          slots: {
            root: 'relative border-b border-default py-8',
            container: '',
            wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
            headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
            title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
            description: 'text-lg text-pretty text-muted',
            links: 'flex flex-wrap items-center gap-1.5'
          },
          variants: {
            title: {
              true: {
                description: 'mt-4'
              }
            }
          }
        }
      }
    })
  ]
})

PageGrid

用于在灵活布局中显示内容的响应式网格系统。

PageHero

用于您页面的响应式英雄区块。

PageHeaderPRO

PageHeader^PRO