페이지헤더 PageHeader

Github (GitHub)
페이지에 대한 응답 헤더입니다.A responsible header for your pages.

Usage

PageHeader 구성 요소는 페이지의 머리글을 표시합니다.The PageHeader component displays a header for your page.

Page 구성 요소의 기본 슬롯 내에서 [PageBodyxph06x/docs/components/page-bodyxph08x 구성 요소 앞에 사용합니다.

<template>
  <UPage>
    <UPageHeader />

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

제목

title prop 을 사용하여 헤더에 제목을 표시합니다.

PageHeader

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

Description

description prop 을 사용하여 헤더에 설명을 표시합니다.

PageHeader

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

헤더 라인

headline prop을 사용하여 헤더에 제목을 표시합니다.

Components

PageHeader

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

링크 링크

links prop를 사용하여 헤더에 Button 목록을 표시합니다.

Components

PageHeader

GitHub
A responsive page header with title, description and actions.
<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui/tree/v4/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>
<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nuxt/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui/tree/v4/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('docs').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

Props (### Props)

Prop Default Type
as
'div'
any

The element or component this component should render as.

headline
string
title
string
description
string
links
ButtonProps[]

Display a list of Button next to the title. { color: 'neutral', variant: 'outline' }

ui
{ root?: SlotClass; container?: SlotClass; wrapper?: SlotClass; headline?: SlotClass; title?: SlotClass; description?: SlotClass; links?: SlotClass; }

슬롯

Slot Type
headline
{}
title
{}
description
{}
links
{}
default
{}

Theme 테마

app.config.ts
export default defineAppConfig({
  ui: {
    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({
      ui: {
        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'
              }
            }
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

PageGrid

A responsive grid system for displaying content in a flexible layout.

PageHero

A responsive hero for your pages.