Skip to content

tinper-bee/bee-colorpicker

Repository files navigation

colorpicker

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

react colorpicker component for tinper-bee

可定制的取色板组件

使用

使用单独的colorpicker包

组件引入

先进行下载bee-colorpicker包

npm install --save bee-colorpicker

组件调用

import ColorPicker from 'bee-colorpicker';
ReactDOM.render(
        <ColorPicker label="颜色" />
        , document.getElementById('target'));

样式引入

  • 可以使用link引入build目录下ColorPicker.css
<link rel="stylesheet" href="./node_modules/bee-colorpicker/build/ColorPicker.css">
  • 可以在js中import样式
import "./node_modules/bee-colorpicker/src/ColorPicker.scss"
//或是
import "./node_modules/bee-colorpicker/build/ColorPicker.css"

API

参数 说明 类型 默认值
className 类名 string -
value input当前值 string -
required 是否是必输项 bool false
disabled 是否禁用 bool false
disabledAlpha 是否禁用透明度 bool false
placeholder input中的提示信息 string -
onChange input值发生改变触发的回调 func -
autoCalculate 根据选中的颜色自动计算比其 浅一色度/深一色度 的色值 func -

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-colorpicker
$ cd bee-colorpicker
$ npm install
$ npm run dev