페이지사이드 PageAside

페이지 네비게이션을 표시하기 위해 옆으로 고정됩니다.

Usage

PageAside 구성 요소는 lg breakpoint부터 시작하여 표시되는 고정 <aside> 요소입니다.

PageAside 구성 요소는 --ui-header-height CSS 변수를 사용하여 Header 아래에 정확하게 위치합니다.

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

Props

Prop	Default	Type
`as`	`'aside'`	`any` The element or component this component should render as.
`ui`		`{ root?: SlotClass; container?: SlotClass; top?: SlotClass; topHeader?: SlotClass; topBody?: SlotClass; topFooter?: SlotClass; }`

슬롯

Slot	Type
`top`	`{}`
`default`	`{}`
`bottom`	`{}`

Theme (## 테마)

app.config.ts

export default defineAppConfig({
  ui: {
    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({
      ui: {
        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'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

PageAnchors

A list of anchors to be displayed in the page.

PageBody

The main content of your page.