xy-checkbox
TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published
IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-checkbox

xy-checkbox

复选框, 复选框组 单选框, 单选框组

安装

# yarn 
yarn add xy-checkbox utils-hooks classNames

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox, Radio, CheckboxGroup, RadioGroup } from "xy-checkbox";
// 可选的引入样式
import "xy-checkbox/assets/index.css";
ReactDOM.render(<Checkbox>复选框</Checkbox>, container);

API

Checkbox/Radio

属性 说明 类型 默认值
name 同原生 input checkbox 一样的 name string
checked 复选框是否选中 boolean false
defaultChecked 默认是否选中 boolean false
indeterminate 不确定状态 boolean false
disabled 是否禁用 boolean false
children 内容 React.ReactNode
autoFocus 是否自动聚集焦点 boolean false
value 同原生 input checkbox 一样的 value, 作为复选框组内使用时必须 string
onChange Checkbox 值更改事件 (chcked: boolean, value: any) => void
onFocus Checkbox 聚集焦点事件 (e: React.FocusEvent) => void
onBlur Checkbox 失去焦点事件 (e: React.FocusEvent) => void
onClick Checkbox 点击事件 (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void

CheckboxGroup

属性 说明 类型 默认值
value 选中复选框值集合 any[]
defaultValue 默认选中复选框值集合 any[]
onChange change 事件 (val: any[], checkedAll: boolean) => void
onBlur 复选框组失去焦点事件 (e: React.FocusEvent) => void
disabled 是否禁用整个组 boolean false

RadioGroup

属性 说明 类型 默认值
value 选中复选框值集合 any
defaultValue 默认选中复选框值集合 any
disabled 是否禁用整个组 boolean false
onChange change 事件 (val: any) => void
onBlur 复选框组失去焦点事件 (e: React.FocusEvent) => void

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-checkbox is released under the MIT license.

Dependents (1)

Package Sidebar

Install

npm i xy-checkbox

Weekly Downloads

1

Version

1.4.0

License

MIT

Unpacked Size

39.7 kB

Total Files

30

Last publish

Collaborators

  • xueyou2000