Container 容器布局

容器布局组件提供了一种声明式的方式来编排页面的整体骨架。支持两种使用模式：

pattern 便捷模式 — 通过 pattern 属性快速切换十二种版型
灵活子组件模式 — 子组件自由组合

pattern 便捷模式

通过 pattern 属性快速切换布局结构，适应不同页面场景。

classic — 经典四区域

header 在上、aside 在左、main 居中、footer 在下。适合大多数后台管理系统。

vue


<TContainer pattern="classic" header-height="56px" aside-width="220px">
  <template #header>顶部导航</template>
  <template #aside>侧边菜单</template>
  主内容
  <template #footer>底部版权</template>
</TContainer>

十二种版型总览

模式	结构	说明
`classic`	`[Header]` → `[Aside\|Main]` → `[Footer]`	经典四区
`classic-right`	`[Header]` → `[Main\|Aside]` → `[Footer]`	侧边栏在右
`sidebar-full`	`[Aside \| Header+Main+Footer]`	左侧通高
`sidebar-full-right`	`[Header+Main+Footer \| Aside]`	右侧通高
`header-sidebar`	`[Header]` → `[Aside\|Main+Footer]`	头全宽，左栏到底
`header-sidebar-right`	`[Header]` → `[Main+Footer\|Aside]`	头全宽，右栏到底
`vertical`	`[Header]` → `[Main]` → `[Footer]`	纯上下
`sidebar-main`	`[Aside\|Main]`	仅左右
`main-sidebar`	`[Main\|Aside]`	仅右左
`header-main`	`[Header]` → `[Main]`	仅头+内容
`main-footer`	`[Main]` → `[Footer]`	仅内容+底
`main-only`	`[Main]`	仅内容

灵活子组件模式

使用 TContainerHeader、TContainerAside、TContainerMain、TContainerFooter 子组件自由组合布局。方向自动推断：含 header/footer 时垂直排列，否则水平排列。

vue


<TContainer>
  <TContainerHeader height="56px">
    <!-- 顶部导航 -->
  </TContainerHeader>
  <TContainerAside width="220px">
    <!-- 侧边菜单 -->
  </TContainerAside>
  <TContainerMain>
    <!-- 主内容 -->
  </TContainerMain>
  <TContainerFooter height="60px">
    <!-- 底部版权 -->
  </TContainerFooter>
</TContainer>

方向自动推断

不带 direction 属性时，TContainer 自动检测子组件：

含 TContainerHeader 或 TContainerFooter → vertical（上下排列）
仅 TContainerAside + TContainerMain → horizontal（左右排列）

折叠侧边栏

设置 aside-collapsed 和 aside-collapsed-width 实现侧边栏折叠效果。

API

TContainer 属性 (Props)

属性名	说明	类型	默认值
`pattern`	布局版型。支持十二种模式（见上方总览表）	`ContainerPattern`	`undefined`
`direction`	布局方向。未设置时自动推断（见下方说明）	`'horizontal' \| 'vertical'`	自动
`header-height`	头部区域高度（仅 pattern 模式）	`string \| number`	`'60px'`
`footer-height`	底部区域高度（仅 pattern 模式）	`string \| number`	`'60px'`
`aside-width`	侧边栏宽度（仅 pattern 模式）	`string \| number`	`'260px'`
`aside-collapsed`	是否折叠侧边栏	`boolean`	`false`
`aside-collapsed-width`	折叠后侧边栏宽度	`string \| number`	`'64px'`

方向自动推断规则：

direction 显式设置 → 使用指定方向
pattern 设置且 direction 未设置 → 按 pattern 规则推断
两者均未设置 → 检测子组件：含 Header/Footer → vertical，否则 horizontal

TContainer 插槽 (Slots) — pattern 模式

插槽名	说明
`header`	顶部区域内容
`aside`	侧边栏内容
`default`	主内容区（Main）
`footer`	底部区域内容

子组件属性

组件	属性	说明	默认值
`TContainerHeader`	`height`	头部高度	`undefined`
`TContainerAside`	`width`	侧边栏宽度	`undefined`
`TContainerMain`	—	语义化主内容区	—
`TContainerFooter`	`height`	底部高度	`undefined`

子组件在灵活模式下可直接设置 height/width，无需依赖父容器的 pattern 属性。

Container 容器布局 ​

pattern 便捷模式 ​

classic — 经典四区域 ​

十二种版型总览 ​

灵活子组件模式 ​

方向自动推断 ​

折叠侧边栏 ​

API ​

TContainer 属性 (Props) ​

TContainer 插槽 (Slots) — pattern 模式 ​

子组件属性 ​