Main
사용 가능한 뷰포트 높이를 채우는 주 요소입니다.
Usage
Main 구성요소는 Header 구성요소와 함께 작동하는 <main> 요소를 렌더링하여 뷰포트의 사용 가능한 높이까지 확장되는 전체 높이 레이아웃을 만듭니다.
예
xapp.vue 내부
app.vue 또는 레이아웃에서 Main 구성 요소를 사용합니다.
app.vue
<template>
<UApp>
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
API
Props (### Props)
| Prop | Default | Type |
|---|---|---|
as | 'main' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Theme (## 테마)
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))]'
}
}
})
]
})변경 로그
No recent changes