示例
直接操作示例，查看组件在具体任务中的状态与反馈。
发布步骤
- 确认公开 API 与类型声明一致。
- 生成本地确定性示例和机器可读文档。
- 记录仍未完成的限制，不提前提升成熟度。
嵌套清单
- 公开内容
- 中文使用建议与真实限制
- 在窄屏中可独立运行的组件示例
- 内部证据仍保留在 Storybook 和 readiness 流程中。
并列项目
- 设计
- 开发
有序步骤
- 准备
- 发布
紧凑
- 检查公开属性
- 验证键盘操作
- 记录限制
宽松
- 检查公开属性
- 验证键盘操作
- 记录限制
使用建议
顺序决定列表类型
步骤、排名和优先级使用 ordered；没有先后关系的并列项目使用默认无序列表。
每项保持同一抽象层级
同一列表中的项目应采用一致粒度和句式，复杂说明可以放入对应 ListItem 内部。
谨慎增加嵌套层级
只有真实从属关系才使用嵌套列表，并控制深度，避免在窄屏中压缩主要内容。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import {
BaseList,
BaseListItem,
} from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- List 与 ListItem 只管理静态列表结构，不提供虚拟滚动、选择、拖拽或树形交互；大型可交互集合需要专用组件。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
BaseList
查看组件源码export type BaseListProps =
| (BaseListSharedProps &
Omit<
HTMLAttributes<HTMLUListElement>,
'children' | 'className' | 'style'
> & {
ordered?: false;
})
| (BaseListSharedProps &
Omit<
OlHTMLAttributes<HTMLOListElement>,
'children' | 'className' | 'style'
> & {
ordered: true;
});| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
marker | 列表项使用的项目符号或序号样式。 | BaseListMarker | 'auto' |
spacing | 列表项之间使用的垂直间距。 | BaseListSpacing | 'default' |
children | 在 BaseList 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseListClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
ordered | 是否使用有序列表语义和序号标记。 | false | true | false |
BaseListItem
查看组件源码export interface BaseListItemProps
extends Omit<
LiHTMLAttributes<HTMLLIElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseListItemClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseListItem 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseListItemClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |