示例
直接操作示例，查看组件在具体任务中的状态与反馈。
发布说明
为什么仍保持 Beta
当前已经具备公开 API、状态覆盖和包消费证据，但浏览器视觉证据尚未闭环。Container 只约束内容宽度，不替代 main、article 或页面网格。
紧凑
紧凑内容
宽松
宽松内容
文章区域
组件采用说明
内层正文保持适合阅读的行长，外层仍可容纳其他页面元素。
使用建议
最大宽度服从阅读任务
正文采用较窄的 maxWidth，数据密集页面可以更宽；不要仅为了填满桌面而拉长行长。
使用逻辑方向内边距
padding 会应用到 inline 方向，可使用 clamp 在窄屏保留安全边距并随可用宽度平滑调整。
页面语义由宿主声明
Container 默认渲染 div；main、article、section 等地标应由页面结构在外层明确提供。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseContainer } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Container 只管理一个 maxWidth 和逻辑方向 padding，不提供页面栏位、容器查询、断点对象或语义元素切换。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseContainerProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
maxWidth?: BaseLayoutLength;
padding?: BaseLayoutLength;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseContainerClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseContainer 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
maxWidth | 组件或内容区域允许使用的最大宽度。 | BaseLayoutLength | '80rem' |
padding | 容器内容区使用的内边距。 | BaseLayoutLength | '1rem' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseContainerClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |