Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gem-mine/rc-color-picker
React ColorPicker
https://github.com/gem-mine/rc-color-picker
Last synced: about 1 month ago
JSON representation
React ColorPicker
- Host: GitHub
- URL: https://github.com/gem-mine/rc-color-picker
- Owner: gem-mine
- License: mit
- Created: 2019-09-10T05:45:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-08T13:58:01.000Z (over 2 years ago)
- Last Synced: 2024-11-30T03:51:36.579Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://gem-mine.github.io/rc-color-picker/site/
- Size: 2.09 MB
- Stars: 1
- Watchers: 4
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-color-picler
---
React Color Pocker
fork from [rc-color-picker](https://github.com/react-component/color-picker)
## 何时使用
- 从一组颜色中进行选择，用于改变元素的颜色或背景色
## 浏览器支持
IE 9+
## 安装
```bash
npm install @gem-mine/rc-color-picker --save
```
## 运行
```bash
# 默认开启服务器，地址为 ：http://local:8000/
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start
# 构建生产环境静态文件，用于发布文档
npm run site
```
## 代码演示
在线示例：https://gem-mine.github.io/rc-color-picker/site/
### anim
```jsx
import '@gem-mine/rc-color-picker/lib/style/'
import ColorPicker from '@gem-mine/rc-color-picker'
function changeHandler(colors) {
console.log(colors);
}
ReactDOM.render(
, mountNode)
```
### custom-trigger
```jsx
import '@gem-mine/rc-color-picker/lib/style/'
import ColorPicker from '@gem-mine/rc-color-picker'
function changeHandler(colors) {
console.log(colors);
}
ReactDOM.render(
choose color
, mountNode)
```
### panel
```jsx
import '@gem-mine/rc-color-picker/lib/style/'
import { Panel as ColorPickerPanel } from '@gem-mine/rc-color-picker'
function onChange(obj) {
console.log(obj);
}
ReactDOM.render(
, mountNode)
```
### no-presetColors
```jsx
import '@gem-mine/rc-color-picker/lib/style/'
import { Panel as ColorPickerPanel } from '@gem-mine/rc-color-picker'
function onChange(obj) {
console.log(obj);
}
ReactDOM.render(
, mountNode)
```
### simple
```jsx
import '@gem-mine/rc-color-picker/lib/style/'
import ColorPicker from '@gem-mine/rc-color-picker'
function changeHandler(colors) {
console.log(colors);
}
function closeHandler(colors) {
console.log(colors);
}
ReactDOM.render(
topLeft
topRight
bottomLeft
bottomRight
, mountNode)
```
## API
### ColorPicker.props
| name | type | default | description |
| --- | --- | --- | --- |
| align | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | | popup 's align config |
| alpha | Number | `100` | opacity of the color |
| animation | String | | index.css support 'slide-up' |
| children | Node | `` | additional trigger appended to picker |
| className | String | '' | Aditional class to be added to component |
| color | String | `#ff0000` | color board current background color |
| defaultAlpha | Number | `100` | opacity of the color |
| defaultColor | String | `#ff0000` | color board current background color |
| enableAlpha | Boolean | `true` | enable alpha controls |
| getCalendarContainer | Function():Element | `function(){return document.body;}` | dom node where picker to be rendered into |
| mode | String | `RGB` | color mode, support mode 'RGB', 'HSB' |
| onChange | Function | noop | when select color |
| onClose | Function | noop | when color picker popup close |
| onOpen | Function | noop | when color picker popup open |
| placement | String | `topLeft` | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
| transitionName | String | | css class for animation |
### ColorPicker.Panel.props
| name | type | default | description |
| --- | --- | --- | --- |
| alpha | Number | `100` | opacity of the color |
| className | String | `''` | Aditional class to be added to component |
| color | String | `#ff0000` | color board current background color |
| defaultAlpha | Number | `100` | opacity of the color |
| defaultColor | String | `#ff0000` | color board current background color |
| enableAlpha | Boolean | `true` | enable alpha controls |
| mode | String | `RGB` | color mode, support mode 'RGB', 'HSB' |
| onBlur | Function | | when picker loose focus |
| onChange | Function | | when select color trigger |
| onFocus | Function | | when picker focus trigger |
| style | Object | `{}` | root node CSS style |
| presetColors | string[] | \['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'\] | preset colors to be selected |