O componente PageHeader exibe um cabeçalho para a sua página.
Use-o dentro do slot padrão do componente Page, antes do componente PageBody:
<template>
<NPage>
<NPageHeader />
<NPageBody />
</NPage>
</template>
Use a prop title para exibir um título no cabeçalho.
<template>
<NPageHeader title="PageHeader" />
</template>
Use a prop description para exibir uma descrição no cabeçalho.
<template>
<NPageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
/>
</template>
Use a prop headline para exibir uma manchete no cabeçalho.
<template>
<NPageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
headline="Components"
/>
</template>
Use a prop links para exibir uma lista de Button no cabeçalho.
<script setup lang="ts">
import type { ButtonProps } from '@nitro/ui'
const links = ref<ButtonProps[]>([
{
label: 'GitHub',
icon: 'i-simple-icons-gitlab',
to: 'https://gitlab.nitro.news/nitro/ui/-/tree/main/src/runtime/components/PageHeader.vue',
target: '_blank'
}
])
</script>
<template>
<NPageHeader
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 '@nitro/ui'
const links = ref<ButtonProps[]>([
{
label: 'GitHub',
icon: 'i-simple-icons-gitlab',
to: 'https://gitlab.nitro.news/nitro/ui/-/tree/main/src/runtime/components/PageHeader.vue',
target: '_blank'
}
])
</script>
<template>
<NPageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
headline="Components"
:links="links"
/>
</template>
Use o componente PageHeader em uma página para exibir o cabeçalho da página:
<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>
<NPage>
<NPageHeader
:title="page.title"
:description="page.description"
:headline="page.headline"
:links="page.links"
/>
<NPageBody>
<ContentRenderer :value="page" />
<NSeparator />
<NContentSurround :surround="surround" />
</NPageBody>
<template #right>
<NContentToc :links="page.body.toc.links" />
</template>
</NPage>
</template>
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe 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.
| |
ui | { root?: SlotClass; container?: SlotClass; wrapper?: SlotClass; headline?: SlotClass; title?: SlotClass; description?: SlotClass; links?: SlotClass; } |
| Slot | Type |
|---|---|
headline | {} |
title | {} |
description | {} |
links | {} |
default | {} |
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'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
}
}
}
})
]
})