Page

GitHub
具有左右列的页面网格布局。

用法

“页面”组件帮助您创建具有可选左栏和右栏的布局。它非常适合构建文档站点和其他以内容为中心的页面。

<template>
  <UPage>
    <template #left />

    <template #right />
  </UPage>
</template>
如果未指定插槽，则页面将显示为居中单列布局。

示例：

虽然这些示例使用Nuxt Content，但这些组件可以与任何内容管理系统集成。

在布局内

在具有left插槽的布局中使用Page组件可显示导航：

layouts/docs.vue
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>

<template>
  <UPage>
    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" />
      </UPageAside>
    </template>

    <slot />
  </UPage>
</template>
在本例中，我们使用ContentNavigation组件来显示app.vue中注入的导航。

在页面内

在具有right插槽的页面中使用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>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <UContentSurround :surround="surround" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>
在本例中，我们使用ContentToc组件显示目录。

应用程序接口

道具

Prop Default Type
as
'div'
any

The element or component this component should render as.

ui
{ root?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; }

插槽

Slot Type
left
{}
default
{}
right
{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    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 ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        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'
              }
            }
          ]
        }
      }
    })
  ]
})

更改日志

No recent changes

ChangelogVersions

Display a list of changelog versions in a timeline.

PageAnchors

A list of anchors to be displayed in the page.