Page^PRO

一个带有左侧和右侧列的页面网格布局。

用法

Page 组件可帮助您创建带有可选左侧和右侧列的布局。它非常适合构建文档网站和其他内容重点突出的页面。

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

    <template #right />
  </UPage>
</template>

如果未指定任何插槽 (slot)，页面将显示为居中单列布局。

示例

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

在布局中使用

在布局中使用 Page 组件并配合 left 插槽来显示导航

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 中的导航。

在页面中使用

在页面中使用 Page 组件并配合 right 插槽来显示目录

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').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 组件来显示目录。

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 该组件应渲染成的元素或组件。
`ui`		`{ root?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; }`

插槽

插槽	类型
`left`	`{}`
`default`	`{}`
`right`	`{}`

主题

app.config.ts

export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        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 uiPro from '@nuxt/ui-pro/vite'

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

NavigationMenu

一个可以水平或垂直显示的链接列表。

PageAccordion

一个预设样式的 Accordion，用于在页面中显示。

PagePRO

Page^PRO