Páginas

GitHub también
Un lado pegajoso para mostrar la navegación de su página.

xph0000xUso

El componente PageAside es un elemento adhesivo <aside> que solo se muestra a partir del punto de interrupción lg .

El componente PageAside utiliza la variable CSS --ui-header-height para posicionarse correctamente debajo de la variable Header.

Úselo dentro de la ranura left o right del componente Page:

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

Ejemplos

Si bien estos ejemplos utilizan Nuxt Content, los componentes se pueden integrar con cualquier sistema de gestión de contenido.

Dentro de un diseño

Use the PageAside component in a layout to display the navigation:

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>
En este ejemplo, usamos el componente ContentNavigation para mostrar la navegación inyectada en app.vue.

API (Edición española)

Accesorios

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 (Edición española)

Slot Type
top
{}
default
{}
bottom
{}

Temas

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 (Edición española)

No recent changes

PageAnchors

A list of anchors to be displayed in the page.

PageBody

The main content of your page.