可勾选列表 CheckList
列表的勾选操作。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库,不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot,否则 Toast、Dialog 等命令式 API 无法渲染;深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库(MIT),固定在 npm 5.43.0 对应的提交;示例中的 DemoBlock 等展示辅助组件由 JGuang 重写,不属于 antd-mobile 的 API。
列表的勾选操作。
何时使用
在一组列表项中选择一个或多个。
CheckList 底层是基于 List 实现的,是可以进行勾选的列表。
示例
CheckList
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| activeIcon | 选中图标 | ReactNode | <CheckOutline /> |
| extra | 列表右侧区域 | (active: boolean) => ReactNode | - |
| defaultValue | 默认项 | string[] | [] |
| disabled | 是否禁用 | boolean | false |
| multiple | 是否允许多选 | boolean | false |
| onChange | 选项改变时触发 | (value: string[]) => void | - |
| readOnly | 是否只读 | boolean | false |
| value | 选中项 | string[] | [] |
此外,还支持 List 的 mode 属性
CSS 变量
同 List
CheckList.Item
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 是否禁用 | boolean | false |
| readOnly | 是否只读 | boolean | false |
| value | 选项值 | string | - |
此外,还支持 List.Item 的以下属性:title children description prefix onClick