@beisen-phoenix/mobile-checkbox

用于多项选择或单独用于标记切换选中状态

Usage no npm install needed!

<script type="module">
  import beisenPhoenixMobileCheckbox from 'https://cdn.skypack.dev/@beisen-phoenix/mobile-checkbox';
</script>

README

复选。

概述

用于多项选择或单独用于标记切换选中状态

组件结构设计

pic

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 无