Usage
The Page component helps you create layouts with optional left and right columns. It's perfect for building documentation sites and other content-focused pages.
<template>
<B24Page>
<template #left />
<template #right />
</B24Page>
</template>
The page will display as a centered single column layout if no slots are specified.
Examples
While these examples use Nuxt Content, the components can be integrated with any content management system.
Within a layout
Use the Page component in a layout with the left slot to display a navigation:
layouts/docs.vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
const navigation = inject<Ref<NavigationMenuItem[]>>('navigation')
</script>
<template>
<B24Page>
<template #left>
<B24PageAside>
<B24NavigationMenu
:key="navigationKey"
:items="navigation"
orientation="vertical"
/>
</B24PageAside>
</template>
<slot />
</B24Page>
</template>
In this example, we use the
NavigationMenu component to display the navigation injected in app.vue.Within a page
Use the Page component in a page with the right slot to display a table of contents:
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" />
<B24PageBody>
<ContentRenderer :value="page" />
<B24Separator />
<B24ContentSurround :surround="surround" />
</B24PageBody>
<template #right>
<B24ContentToc :links="page.body.toc.links" />
</template>
</B24Page>
</template>
In this example, we use the
ContentToc component to display the table of contents.API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
page: {
slots: {
root: 'flex flex-col lg:grid lg:grid-cols-10 lg:gap-10',
left: 'lg:col-span-2',
center: 'lg:col-span-8',
right: 'lg:col-span-2 order-first lg:order-last'
},
variants: {
left: {
true: ''
},
right: {
true: ''
}
},
compoundVariants: [
{
left: true,
right: true,
class: {
center: 'lg:col-span-6'
}
},
{
left: false,
right: false,
class: {
center: 'lg:col-span-10'
}
}
]
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
page: {
slots: {
root: 'flex flex-col lg:grid lg:grid-cols-10 lg:gap-10',
left: 'lg:col-span-2',
center: 'lg:col-span-8',
right: 'lg:col-span-2 order-first lg:order-last'
},
variants: {
left: {
true: ''
},
right: {
true: ''
}
},
compoundVariants: [
{
left: true,
right: true,
class: {
center: 'lg:col-span-6'
}
},
{
left: false,
right: false,
class: {
center: 'lg:col-span-10'
}
}
]
}
}
})
]
})