Page
Un diseño de cuadrícula para sus páginas con columnas izquierda y derecha.
xph0000xUso
El componente Página le ayuda a crear diseños con columnas opcionales a la izquierda y a la derecha. Es perfecto para crear sitios de documentación y otras páginas centradas en el contenido.
<template>
<UPage>
<template #left />
<template #right />
</UPage>
</template>
La página se mostrará como un diseño de columna única centrado si no se especifican ranuras.
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
Utilice el componente Página en un diseño con la ranura left para mostrar una navegación:
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.Dentro de una página
Utilice el componente Página en una página con la ranura right para mostrar una tabla de contenido:
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
definePageMeta({
layout: 'docs'
})
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('docs').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>
En este ejemplo, usamos el componente
ContentToc para mostrar la tabla de contenido.API (Edición española)
Props (Edición española)
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { root?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; } |
Slots (Edición española)
| Slot | Type |
|---|---|
left | {} |
default | {} |
right | {} |
Temas
app.config.ts
export default defineAppConfig({
ui: {
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({
ui: {
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'
}
}
]
}
}
})
]
})Changelog (Edición española)
No recent changes