TinyVue Container 组件完全指南：五种版型撑起你的"应用骨架"

开篇：别再手写 CSS 布局了，有它不香吗？

你有没有经历过这种折磨：接到一个后台管理系统需求，设计稿上白纸黑字画着------顶部导航栏、左侧菜单栏、右侧主内容区、底部状态栏。你一看，心想"这不就是经典的 header-aside-main-footer 四区域布局吗"，然后打开了 CSS 文件，开始手写 flex/grid 布局。

半个小时后，你发现：

aside 宽度写死了 200px，换了个菜单文字长一点就溢出
footer 死活贴不到最下面，中间留了一大片空白
header 高度改了之后，main 区域没有自动调整，得手动算 calc(100vh - 60px - 60px)

这不是写代码，这是"数字填空游戏"。

TinyVue 的 Container（容器布局）组件就是来终结这种手工活的。

它把应用级布局抽象成了五种预制版型，每个版型预设了 header、aside、main、footer 四个区域的位置关系。你只需要选一个版型，把内容塞进对应插槽，剩下的全部交给组件------宽度、高度、自适应，全自动。

1. 四大插槽：应用布局的"乐高积木"

Container 组件本质上是一个"布局容器"，它提供了四个命名插槽，对应页面的四个区域：

插槽名	区域	说明
`header`	头部	顶部导航栏、标题栏等
`aside`	侧边栏	左侧菜单、导航树等
`default`	主内容区	页面核心内容（不用写 `#default`，直接放子元素即可）
`footer`	底部	状态栏、版权信息等

vue 复制代码

<template>
  <tiny-container pattern="legend">
    <template #header>
      <div>顶部导航栏</div>
    </template>
    <template #aside>
      <div>左侧菜单</div>
    </template>
    <div>主内容区域（自动填充剩余空间）</div>
    <template #footer>
      <div>底部版权信息</div>
    </template>
  </tiny-container>
</template>

<script setup>
import { TinyContainer } from '@opentiny/vue'
</script>

四个插槽，四个区域，干净利落。main 区域不需要任何插槽名------直接把内容作为 Container 的子元素放进去就好，它会自动填满 header、aside、footer 之外的所有空间。

2. 五种版型：一个属性切换布局风格

pattern 属性是 Container 的灵魂------它决定了四个区域之间的位置关系和显隐状态。TinyVue 内置了五种版型，覆盖了绝大多数后台管理系统的布局需求：

2.1 default（默认版型）

四区域全展示------header 在上、aside 在左、main 居中、footer 在下。这是最经典的后台布局，适合大多数管理后台。

vue 复制代码

<tiny-container pattern="default">
  <template #header><div>Header</div></template>
  <template #aside><div>Aside</div></template>
  <div>Main</div>
  <template #footer><div>Footer</div></template>
</tiny-container>

想象一下：你的邮箱客户端。顶部是搜索栏和操作按钮（header），左侧是邮件文件夹（aside），中间是邮件列表（main），底部可能是存储用量提示（footer）。这就是 default。

2.2 classic（经典版型）

同样展示四个区域，但布局方式与 default 不同。适合需要不同视觉层次感的管理界面。

vue 复制代码

<tiny-container pattern="classic">
  <template #header><div>Header</div></template>
  <template #aside><div>Aside</div></template>
  <div>Main</div>
  <template #footer><div>Footer</div></template>
</tiny-container>

2.3 simple（简约版型）

去掉 aside，只保留 header、main、footer 三区域。适合不需要侧边栏的简洁型应用。

vue 复制代码

<tiny-container pattern="simple">
  <template #header><div>Header</div></template>
  <div>Main（没有 aside，空间更宽敞）</div>
  <template #footer><div>Footer</div></template>
</tiny-container>

适用场景：官网后台的活动配置页、简单的数据展示页、移动端适配页面等。

2.4 fashion（时尚版型）

带侧边栏的另一种布局风格，aside 的展示方式与 default/classic 不同，适合追求更现代视觉效果的应用。

vue 复制代码

<tiny-container pattern="fashion">
  <template #header><div>Header</div></template>
  <template #aside><div>Aside</div></template>
  <div>Main</div>
  <template #footer><div>Footer</div></template>
</tiny-container>

2.5 legend（传奇版型）

四区域全展示，但区域的排列组合独具特色。适合复杂的、需要充分展示信息的管理后台。

vue 复制代码

<tiny-container pattern="legend">
  <template #header><div>Header</div></template>
  <template #aside><div>Aside</div></template>
  <div>Main</div>
  <template #footer><div>Footer</div></template>
</tiny-container>

小贴士 ：pattern 支持动态切换！结合 Radio 组件，你可以做一个"版型切换器"，让用户实时预览不同布局效果：

vue 复制代码

<template>
  <tiny-radio-group v-model="pattern">
    <tiny-radio label="default">默认</tiny-radio>
    <tiny-radio label="classic">经典</tiny-radio>
    <tiny-radio label="simple">简约</tiny-radio>
    <tiny-radio label="fashion">时尚</tiny-radio>
    <tiny-radio label="legend">传奇</tiny-radio>
  </tiny-radio-group>

  <tiny-container :pattern="pattern">
    <div>主内容区域</div>
    <template #header><div>Header</div></template>
    <template #aside><div>Aside</div></template>
    <template #footer><div>Footer</div></template>
  </tiny-container>
</template>

<script setup>
import { ref } from 'vue'
import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue'

const pattern = ref('default')
</script>

3. 尺寸调节：精准控制每个区域的身高和腰围

默认尺寸不合适？Container 提供了三个属性让你精确调节：

属性	类型	默认值	控制区域
`header-height`	number \| string	60	头部高度（px）
`footer-height`	number \| string	60	底部高度（px）
`aside-width`	number \| string	200	左侧宽度（px）

vue 复制代码

<template>
  <tiny-container
    pattern="legend"
    :header-height="80"
    :footer-height="80"
    :aside-width="200"
  >
    <template #header>
      <div class="center-text">header-height：80px</div>
    </template>
    <template #aside>
      <div class="center-text">aside-width：200px</div>
    </template>
    <div class="center-text">Main 自动填充剩余空间</div>
    <template #footer>
      <div class="center-text">footer-height：80px</div>
    </template>
  </tiny-container>
</template>

<script setup>
import { ref } from 'vue'
import { TinyContainer } from '@opentiny/vue'
</script>

关键点 ：main 区域的宽高是自适应 的------它会自动计算并填充 header + aside + footer 之外的所有空间。你不需要手动写 calc()，不需要管 overflow，Container 全帮你搞定了。

支持动态绑定：

vue 复制代码

<tiny-container
  :header-height="isExpanded ? 120 : 60"
  :aside-width="menuCollapsed ? 60 : 200"
/>

比如你可以做一个"菜单折叠"功能------折叠时 aside 缩到 60px 只显示图标，展开时恢复到 200px。一行属性绑定，不用改任何 CSS。

4. 版型对比速查表

不知道选哪个版型？看这张表：

版型	有 Header	有 Aside	有 Footer	适用场景
`default`	✅	✅	✅	通用后台管理系统
`classic`	✅	✅	✅	传统企业管理系统
`simple`	✅	❌	✅	简洁应用、无侧边栏场景
`fashion`	✅	✅	✅	现代风格管理界面
`legend`	✅	✅	✅	复杂信息展示型后台

注意：simple 版型不需要 #aside 插槽，如果你传了 aside 内容也不会显示。其他四种版型都支持四区域全展示。

5. 实战技巧：Container + Layout 组合拳

Container 负责的是"宏观布局"------header/aside/main/footer 的大框架。如果你需要在 main 区域内部再做精细的栅格布局，可以和 TinyVue 的 Layout（栅格布局） 组件搭配使用：

vue 复制代码

<template>
  <tiny-container pattern="default" :header-height="60" :aside-width="240">
    <template #header>
      <div>顶部导航栏</div>
    </template>
    <template #aside>
      <div>侧边菜单</div>
    </template>
    <!-- main 区域使用 Layout 做栅格布局 -->
    <tiny-layout>
      <tiny-row>
        <tiny-col :span="8"><div>左面板</div></tiny-col>
        <tiny-col :span="8"><div>中间内容</div></tiny-col>
        <tiny-col :span="8"><div>右面板</div></tiny-col>
      </tiny-row>
    </tiny-layout>
    <template #footer>
      <div>版权信息 © 2026</div>
    </template>
  </tiny-container>
</template>

<script setup>
import { TinyContainer, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
</script>

分工明确：Container 管"四大区域的骨架"，Layout 管"内容区内部的栅格排版"。两者各司其职，组合起来就是一个完整的管理后台布局方案。

6. 样式定制：用 CSS 变量拿捏外观

Container 组件使用了 TinyVue 的 CSS 变量体系，你可以通过全局 CSS 变量或 scoped 样式来定制外观：

css 复制代码

/* 给 header 加上品牌色背景 */
.tiny-container :deep(.tiny-container__header) {
  background-color: var(--tv-color-info-bg-light, #0067d1);
  color: var(--tv-color-info-text, #fff);
}

/* 给 aside 加上半透明效果 */
.tiny-container :deep(.tiny-container__aside) {
  background-color: var(--tv-color-error-bg-light, #0067d180);
}

/* 给 main 区域加上淡背景 */
.tiny-container :deep(.tiny-container__main) {
  background-color: var(--tv-color-warn-bg-light, #0067d133);
}

CSS 变量的好处是：配合 ConfigProvider 的 theme 属性，你可以做运行时主题切换------换一套 CSS 变量值，整个布局的颜色就跟着变，完全不需要重新编译。

总结：Container 该不该用？

场景	是否推荐
后台管理系统的整体布局	✅ 强烈推荐
需要 header/aside/footer 四区域布局	✅ 必用
只要简单的上下两栏布局	⚠️ 用 flex 就够了
页面内部的局部布局	❌ 用 Layout（栅格布局）
需要动态切换版型风格	✅ 用 pattern + v-model
需要菜单折叠/展开功能	✅ 动态绑定 aside-width

Container 的核心价值就一句话：把"应用级布局"这个重复劳动从手写 CSS 变成选版型 + 填插槽。

你不再需要对着设计稿算像素、写 display: flex、处理 overflow------Container 帮你把这些脏活累活全干了。五种版型覆盖了绝大多数后台场景，三个尺寸属性满足精细化控制，main 区域自适应让你彻底告别 calc() 地狱。

选个版型，塞进内容，收工。

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品，实现AI理解用户意图自主完成任务，加速企业应用的智能化改造。欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design

TinyVue 代码仓库：https://https://github.com/opentiny/tiny-vue （欢迎star ⭐）