JGuang

可勾选列表

CheckList · Ant Design Mobile

交互预览
npm install antd-mobile@5.43.0

可勾选列表 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是否禁用booleanfalse
multiple是否允许多选booleanfalse
onChange选项改变时触发(value: string[]) => void-
readOnly是否只读booleanfalse
value选中项string[][]

此外,还支持 List 的 mode 属性

CSS 变量

同 List

CheckList.Item

属性

属性说明类型默认值
disabled是否禁用booleanfalse
readOnly是否只读booleanfalse
value选项值string-

此外,还支持 List.Item 的以下属性:title children description prefix onClick

CSS 变量

同 List.Item