PageHeader

GitHub
Een responsieve header voor uw pagina

Gebruik

Het onderdeel PageHeader geeft een koptekst voor uw pagina weer.

Gebruik het in de standaardsleuf van de Page component, vóór de PageBody component:

<template>
  <UPage>
    <UPageHeader />

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

Titel

Gebruik de title prop om een titel in de header weer te geven.

PageHeader

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

Beschrijving

Gebruik de description prop om een beschrijving in de header weer te geven.

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>

Kop

Gebruik de headline prop om een kop in de header weer te geven.

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

Gebruik de links prop om een lijst met Button in de header weer te geven.

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>

Voorbeelden

Hoewel deze voorbeelden Nuxt Content gebruiken, kunnen de componenten worden geïntegreerd met elk contentbeheersysteem.

Binnen een pagina

Gebruik de PageHeader-component in een pagina om de koptekst van de pagina weer te geven:

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

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; }

Slots

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

Thema

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'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageGrid

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

PageHero

A responsive hero for your pages.