@beisen-phoenix/checkbox

checkbox

Usage no npm install needed!

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

README

复选框组件

@beisen-phoenix/checkbox

概述

多选框主要用于一组可选项多项选择,或者单独用于标记切换某种状态。分为三类:单独使用、CheckboxGroup、全选。

单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

API

参数 说明 类型 默认值 必须
label checkbox的文字说明 string
value checkbox的值 string、 number
checked 是否选中该checkbox boolean
defaultChecked 是否初始选中 boolean false
disabled 禁用checkbox boolean false
extraCls 生成的dom节点的后缀class,一般用于覆盖组件默认样式使用 string
onChange 发生状态变化后的回调 (data: (Object:checkbox的数据), e: event) => void
tipsType 提示UI类型 default【显示为html标签自带title】、animate【显示为标准tooltip】 使用'default'有利于性能提升 string 'animate'
fontSize 文字大小 normal【12号字】、 middle【14号字】 string 'normal'
textColor 文字颜色 M1M2M3M4M5 string 'M3'

2019-08-21

删除半选状态

2019-09-25

最外层布局由flex改为inline-block,增加最大宽度为100% 无文字时,仅渲染checkbox图标,移除文字节点