Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。采用 Flex 布局，包含 Container、Header、Aside、Main、Footer 五个子组件。
常见页面布局
Header + Main
Header + Main
Aside + Main
Aside + Main
完整布局
Header + Aside + Main + Footer 的经典后台布局。Container 组件会自动检测子元素是否包含 Header 或 Footer，如果包含则自动切换为垂直方向布局。
完整布局
在 Nuxt 中使用
Container 组件完全支持 Nuxt 3/4 的 SSR 渲染。以下示例展示了在 Nuxt 的 layouts/default.vue 中搭建带侧边栏折叠的后台管理布局，内容区使用 <NuxtPage /> 渲染当前路由页面。
Nuxt 中使用（layouts/default.vue）
SSR 注意事项：
- ✅ 所有 Props 和样式完全支持
- ✅ Flex 布局方向自动检测正常工作
- ✅ 插槽内容完整渲染
- ✅ 结合
NuxtPage页面容器使用 - ✅
NuxtLink路由链接完整支持 - ✅ 支持响应式侧边栏折叠
SSR 安全性
Container 所有子组件均已通过 SSR 测试，确保服务端和客户端渲染完全一致，Hydration 无错误。
API
Container Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 排列方向 | 'horizontal' | 'vertical' | 自动检测（含 Header/Footer 时为 vertical） |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Header Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 头部高度 | string | '60px' |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Aside Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 侧边栏宽度 | string | '200px' |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Main Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Footer Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 底部高度 | string | '60px' |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Slots
所有子组件均支持 default 默认插槽。
主题变量
Container 组件支持通过覆盖以下 CSS 变量来自定义局部样式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-header-padding | 头部内边距 | 0 20px |
--yh-header-bg-color | 头部背景色 | transparent |
--yh-header-border-bottom | 头部底部边框 | none |
--yh-aside-bg-color | 侧边栏背景色 | transparent |
--yh-aside-border-right | 侧边栏右侧边框 | none |
--yh-main-padding | 主区域内边距 | 20px |
--yh-main-bg-color | 主区域背景色 | transparent |
--yh-footer-padding | 底部内边距 | 0 20px |
--yh-footer-bg-color | 底部背景色 | transparent |
--yh-footer-border-top | 底部顶部边框 | none |