示例
直接操作示例，查看组件在具体任务中的状态与反馈。
发布检查清单
01 · 核对公开合同
确认导出、Props 与成熟度证据来自同一份治理元数据。
02 · 验证窄屏内容
很长的本地说明会自然换行；Stack 不通过视觉重排改变阅读和键盘顺序。
03 · 记录真实限制
未完成的浏览器证据继续保留在 Beta 限制中。
起始对齐
短项较长内容项
拉伸对齐
第一项第二项
创建项目
使用建议
让 DOM 顺序表达阅读顺序
按内容真实先后排列子项，使用 gap 调整节奏；不要通过视觉反转掩盖错误的信息结构。
间距选择可校验的长度
数字会解释为像素，也可以传入受支持的 rem、百分比、clamp 或 CSS 变量，避免拼接不可信值。
对齐跟随内容职责
默认 stretch 适合表单和面板；短标签或按钮需要收紧时再选择 start、center 或 end。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseStack } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Stack 只提供单轴纵向布局，不支持响应式属性对象、语义区域或视觉排序 API；断点策略和页面地标由宿主负责。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseStackProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
gap?: BaseLayoutLength;
align?: BaseLayoutAlign;
justify?: BaseLayoutJustify;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseStackClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseStack 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
gap | 子项之间的间距。 | BaseLayoutLength | — |
align | 内容在对应轴线或单元格中的对齐方式。 | BaseLayoutAlign | 'stretch' |
justify | 子项在主轴方向上的分布方式。 | BaseLayoutJustify | 'start' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseStackClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |