Main
Un elemento principal que llena la altura del viewport disponible.
xph0000xUso
El componente principal representa un elemento <main> que trabaja junto con el componente Header para crear un diseño de altura completa que se extiende a la altura disponible de la ventana gráfica.
El componente principal utiliza la variable CSS
--ui-header-height para posicionarse correctamente debajo del Header.xph008XEjemplos
Dentro de app.vue
Utilice el componente principal en su app.vue o en un diseño:
app.vue
<template>
<UApp>
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
API (Edición española)
Propciones
| Prop | Default | Type |
|---|---|---|
as | 'main' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots (Edición española)
| Slot | Type |
|---|---|
default | {} |
Temas
app.config.ts
export default defineAppConfig({
ui: {
main: {
base: 'min-h-[calc(100vh-var(--ui-header-height))]'
}
}
})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: {
main: {
base: 'min-h-[calc(100vh-var(--ui-header-height))]'
}
}
})
]
})xph01xChangelog (Edición española)
No recent changes