页面
为您的页面提供动态网格布局。
用法
该 Page 组件允许您将页面结构化为带有左侧或右侧列的网格。如果没有提供插槽，页面将为单列。
<template>
<UPage>
<template #left>
<!-- <UAside /> -->
</template>
<template #right>
<!-- <UContentToc /> -->
</template>
</UPage>
</template>
您通常会在布局或父 .vue 页面及其 #left 插槽中使用此组件
pages/docs.vue
<script setup lang="ts">
import type { NavItem } from '@nuxt/content'
const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
</script>
<template>
<UContainer>
<UPage>
<template #left>
<UAside>
<UNavigationTree :links="mapContentNavigation(navigation)" />
</UAside>
</template>
<!-- Change this to `<slot />` when in a layout. -->
<NuxtPage />
</UPage>
</UContainer>
</template>
但您也可以在 [...slug].vue 页面及其 #right 插槽中使用它
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>
<template>
<UPage>
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
<UPageBody prose>
<ContentRenderer v-if="page.body" :value="page" />
</UPageBody>
<template #right>
<UContentToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
插槽
left
{}
right
{}
default
{}
属性
ui
DeepPartial<{ wrapper: string; left: string; center: { narrow: string; base: string; full: string; }; right: string; }>
{}配置
{
wrapper: 'flex flex-col lg:grid lg:grid-cols-10 lg:gap-8',
left: 'lg:col-span-2',
center: {
narrow: 'lg:col-span-6',
base: 'lg:col-span-8',
full: 'lg:col-span-10'
},
right: 'lg:col-span-2 order-first lg:order-last'
}