PageAsidePRO

GitHub
一个用于显示页面导航的固定侧边栏。

用法

PageAside 组件是一个粘性 <aside> 元素，它只会在达到以下断点时开始显示：lg 断点.

PageAside 组件使用 --ui-header-height CSS 变量来正确地将其定位在 Header 组件下方。您可以通过在 CSS 中覆盖此变量来自定义其高度。
:root {
  --ui-header-height: --spacing(16);
}

将其用作 Page 组件的 left 或 right 插槽内容。

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

示例

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

在布局中

在布局中使用 PageAside 组件来显示导航。

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

API

属性

属性默认值类型
as

'aside'

任意类型

此组件应渲染为的元素或组件。

ui

{ root?: ClassNameValue; container?: ClassNameValue; top?: ClassNameValue; topHeader?: ClassNameValue; topBody?: ClassNameValue; topFooter?: ClassNameValue; }

插槽

插槽类型
top

{}

默认

{}

bottom

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    pageAside: {
      slots: {
        root: 'hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5',
        container: 'relative',
        top: 'sticky -top-8 -mt-8 pointer-events-none z-[1]',
        topHeader: 'h-8 bg-default -mx-4 px-4',
        topBody: 'bg-default relative pointer-events-auto flex flex-col -mx-4 px-4',
        topFooter: 'h-8 bg-gradient-to-b from-default -mx-4 px-4'
      }
    }
  }
})
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: {
        pageAside: {
          slots: {
            root: 'hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5',
            container: 'relative',
            top: 'sticky -top-8 -mt-8 pointer-events-none z-[1]',
            topHeader: 'h-8 bg-default -mx-4 px-4',
            topBody: 'bg-default relative pointer-events-auto flex flex-col -mx-4 px-4',
            topFooter: 'h-8 bg-gradient-to-b from-default -mx-4 px-4'
          }
        }
      }
    })
  ]
})
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: {
        pageAside: {
          slots: {
            root: 'hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5',
            container: 'relative',
            top: 'sticky -top-8 -mt-8 pointer-events-none z-[1]',
            topHeader: 'h-8 bg-default -mx-4 px-4',
            topBody: 'bg-default relative pointer-events-auto flex flex-col -mx-4 px-4',
            topFooter: 'h-8 bg-gradient-to-b from-default -mx-4 px-4'
          }
        }
      }
    })
  ]
})

PageAnchors

页面中要显示的锚点列表。

PageBody

您页面的主要内容。