Container
限制内容宽度并建立页面留白。中文惯用名：容器。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.container |
| 名称 | Container |
| 二级分类 | 布局（layout） |
| 用途 | 限制内容宽度并建立页面留白 |
| 描述 | 中文惯用名：容器。 |
预览
静态结构：<div data-slot="container">（w-full px-4 + max-w-screen-{sm|md|lg|xl}，full 为 max-w-none）；centered=false 去掉 mx-auto。子节点经 Renderer children 机制渲染 DSL 子树。
DSL 结构
{
"type": "Container",
"props": {
"size": "lg"
},
"children": [
{
"type": "Text",
"props": {
"text": "页面内容区"
}
}
]
}何时用
何时使用
- 限制内容最大宽度并建立页面两侧留白：文档页、表单页、营销页正文区。
- 需要水平居中的阅读型内容：详情、帮助中心、结果页。
- 按断点选择阅读宽度：sm ~ xl 四档 + full。
何时不用
- 页面级头 / 侧栏 / 内容三区结构：使用 Layout。
- 需要栅格分列：使用 Grid；Container 只管「宽度与留白」。
- 管理后台等需要满宽利用的场景：用 full 或不使用 Container。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| sm / md | 窄栏（640 / 768px 断点） | 表单页、结果页、登录注册 |
| lg（默认） | 标准阅读宽度（1024px 断点） | 文档、详情、帮助中心 |
| xl | 宽栏（1280px 断点） | 数据密度较高的页面 |
| full | 不限宽 | 满宽工作区、仅要留白 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | `'sm' | 'md' | 'lg' |
centered | boolean | true | 是否水平居中（mx-auto） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 同一站点阅读型页面统一一档 size，不逐页切换。
- Container 内再做分栏用 Grid / Flex，不在 Container 上叠加 flex。
- 左右留白交给 Container（px-4），内部组件不再各自补 padding。
正例
- ✓ 文档页：Container lg 居中包裹 Typography 正文。
- ✓ 登录页：Container sm 居中包裹 Form 卡片。
反例
- ✕ 在管理后台列表页强行套窄栏 Container（应 full 或不用）。
- ✕ Container 嵌套 Container（宽度语义冲突）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。