ColorPicker 颜色选择器

取色器。

何时使用

需要获取颜色色值时。

代码演示

ColorPicker

颜色选择器。

ColorPicker颜色选择器 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { ColorPicker } from 'choerodon-ui/pro';
  4. ReactDOM.render(
  5. <ColorPicker defaultValue="#f1c7f2" />,
  6. document.getElementById('container')
  7. );

受控颜色输入框

受控输入框

ColorPicker颜色选择器 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { ColorPicker } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. value: '#0000ff',
  9. };
  10. }
  11. handleChange = (value, oldValue) => {
  12. console.log('[newValue]', value, '[oldValue]', oldValue);
  13. this.setState({
  14. value,
  15. });
  16. }
  17. render() {
  18. return <ColorPicker value={this.state.value} onChange={this.handleChange} />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

数据源

绑定数据源。

ColorPicker颜色选择器 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, ColorPicker } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  6. }
  7. class App extends React.Component {
  8. ds = new DataSet({
  9. autoCreate: true,
  10. fields: [
  11. { name: 'color', type: 'color', defaultValue: '#00ff00', required: true },
  12. ],
  13. events: {
  14. update: handleDataSetChange,
  15. },
  16. });
  17. render() {
  18. return <ColorPicker dataSet={this.ds} name="color" />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

API

属性说明类型默认值
defaultValue默认值string#ff0000