ColorPicker 颜色选择器
取色器。
何时使用
需要获取颜色色值时。
代码演示
ColorPicker
颜色选择器。
import React from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'choerodon-ui/pro';
ReactDOM.render(
<ColorPicker defaultValue="#f1c7f2" />,
document.getElementById('container')
);
受控颜色输入框
受控输入框
import React from 'react';
import ReactDOM from 'react-dom';
import { ColorPicker } from 'choerodon-ui/pro';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '#0000ff',
};
}
handleChange = (value, oldValue) => {
console.log('[newValue]', value, '[oldValue]', oldValue);
this.setState({
value,
});
}
render() {
return <ColorPicker value={this.state.value} onChange={this.handleChange} />;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
数据源
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, ColorPicker } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{ name: 'color', type: 'color', defaultValue: '#00ff00', required: true },
],
events: {
update: handleDataSetChange,
},
});
render() {
return <ColorPicker dataSet={this.ds} name="color" />;
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
defaultValue | 默认值 | string | #ff0000 |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .