1.0.0 • Published 5 years ago
@beisen-phoenix/mobile-checkbox v1.0.0
复选。
概述
用于多项选择或单独用于标记切换选中状态
组件结构设计
API
Checkbox
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| disabled | 失效状态 | boolean | false |
事件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onChange | 变化时回调函数 | (checked: boolean) => void | 无 |
CheckboxGroup
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 可选项 | Array | 无 |
| value | 指定选中的选项 | Array<string / number> | 无 |
| defaultValue | 默认选中的选项 | Array<string / number> | 无 |
| icon | 选择时的自定义icon 不传则为默认的 | React.ReactNode | CheckboxIcon |
| allowClear | 可以点击-清空-选项 清空选中项 | Boolean | false |
背景色
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bgColor | 选项背景色 | string | token.$M9(#fff) |
多语言
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| translation | 语言包 用于翻译组件内置常量 | {empty: string,clear: string} | {empty: '暂时没有信息哦～',clear: '清空'} |
事件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onChange | 变化时回调函数 | (checkedValue: Array<string / number>,data: {text: any,value: any}) => void | 无 |
| onClear | 点击清空按钮时的回调 | (data: Array) => void | 无 |
CheckboxGroupWithFooter
带有底部操作按钮 清空、确定 常用于表单项/筛选项
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 可选项 | Array | 无 |
| value | 指定选中的选项 | Array<string / number> | 无 |
| defaultValue | 默认选中的选项 | Array<string / number> | 无 |
| icon | 选择时的自定义icon 不传则为默认的 | React.ReactNode | CheckboxIcon |
背景色
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bgColor | 选项背景色 | string | token.$M9(#fff) |
多语言
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| translation | 语言包 用于翻译组件内置常量 | {empty: string,clear: string,confirm: string} | {empty: '暂时没有信息哦～',clear: '清空',confirm: '确定'} |
事件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onChange | 变化时回调函数 | (checkedValue: Array<string / number>,data: {text: any,value: any}) => void | 无 |
| onConfirm | 点击确定按钮时的回调 | (data: Array<string / number>) => void | 无 |
| onClear | 点击清空按钮时的回调 | (data: Array) => void | 无 |