Seitenansicht

Ein Sticky zur Seite, um die Navigation Ihrer Seite anzuzeigen.

Bearbeiten

Die PageAside-Komponente ist ein klebriges <aside>-Element, das nur ab dem lg-Breakpoint angezeigt wird.

Die PageAside-Komponente verwendet die CSS-Variable --ui-header-height, um sich korrekt unter der Header zu positionieren.

Verwenden Sie es innerhalb des left-oder right-Steckplatzes der Komponente Page:

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

Examples (Beispiele)

Während diese Beispiele Nuxt Content verwenden, können die Komponenten in jedes Content Management System integriert werden.

In einem Layout

Verwenden Sie die Komponente PageAside in einem Layout, um die Navigation anzuzeigen:

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>

In diesem Beispiel verwenden wir die ContentNavigation-Komponente, um die in app.vue eingespeiste Navigation anzuzeigen.

API (englisch)

Props Bearbeiten

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; }`

Slots Bearbeiten

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

Theme (englisch)

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'
          }
        }
      }
    })
  ]
})

Changelog (englisch)

No recent changes

PageAnchors

A list of anchors to be displayed in the page.

PageBody

The main content of your page.