Usage
The PageHeader component displays a header for your page.
Use it inside the default slot of the Page component, before the PageBody component:
<template>
<B24Page>
<B24PageHeader />
<B24PageBody />
</B24Page>
</template>
Title
Use the title prop to display a title in the header.
PageHeader
<template>
<B24PageHeader title="PageHeader" />
</template>
Description
Use the description prop to display a description in the header.
PageHeader
A responsive page header with title, description and actions.
<template>
<B24PageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
/>
</template>
Headline
Use the headline prop to display a headline in the header.
Components
PageHeader
A responsive page header with title, description and actions.
<template>
<B24PageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
headline="Components"
/>
</template>
Links
Use the links prop to display a list of Button in the header.
<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
const links = ref<ButtonProps[]>([
{
label: 'GitHub',
to: 'https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/PageHeader.vue',
target: '_blank'
}
])
</script>
<template>
<B24PageHeader
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 '@bitrix24/b24ui-nuxt'
const links = ref<ButtonProps[]>([
{
label: 'GitHub',
to: 'https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/PageHeader.vue',
target: '_blank'
}
])
</script>
<template>
<B24PageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
headline="Components"
:links="links"
/>
</template>
Examples
While these examples use Nuxt Content, the components can be integrated with any content management system.
Within a page
Use the PageHeader component in a page to display the header of the page:
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>
<B24Page>
<B24PageHeader
:title="page.title"
:description="page.description"
:headline="page.headline"
:links="page.links"
/>
<B24PageBody>
<ContentRenderer :value="page" />
<B24Separator />
<B24ContentSurround :surround="surround" />
</B24PageBody>
<template #right>
<B24ContentToc :links="page.body.toc.links" />
</template>
</B24Page>
</template>
API
Props
Slots
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/page-header.ts
export default {
slots: {
root: 'relative border-b border-(--ui-color-divider-default) py-8',
container: '',
wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
headline: 'mb-2.5 text-(length:--ui-font-size-sm) font-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-primary) flex items-center gap-1.5',
title: 'text-(length:--ui-font-size-3xl) sm:text-(length:--ui-font-size-4xl) text-pretty font-(--ui-font-weight-bold) text-(--b24ui-typography-label-color)',
description: 'text-(length:--ui-font-size-lg) text-pretty text-(--b24ui-typography-description-color)',
links: 'flex flex-wrap items-center gap-1.5'
},
variants: {
title: {
true: {
description: 'mt-4'
}
}
}
}