页面内容 - Nuxt UI Pro

用法

在页面的默认插槽中使用 PageBody 组件。

此包装器将为您的内容添加一些间距。

<template>
  <UPage>
    <UPageBody>
      <UPageGrid>
        <UPageCard />
      </UPageGrid>
    </UPageBody>
  </UPage>
</template>

您可以使用 prose 属性自动将 prose prose-primary dark:prose-invert max-w-none 类添加到您的内容中。

<template>
  <UPage>
    <UPageBody prose>
      <ContentRenderer :value="page" />
    </UPageBody>
  </UPage>
</template>

您通常会在 [...slug].vue 页面中使用此组件

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>

插槽

默认

{}

属性

DeepPartial<{ wrapper: string; prose: string; }>

{}

prose

布尔值

false

配置

{
  wrapper: 'mt-8 pb-24',
  prose: 'prose prose-primary dark:prose-invert max-w-none'
}

页面

用于页面动态网格布局。

页面卡片

预制卡片，用于在页面中添加链接。