颜色选择器支持定制默认颜色
This commit is contained in:
parent
74c9925590
commit
5d76f7b552
|
@ -11,6 +11,8 @@
|
|||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `columnsCount` 默认为 `1` 可以配置成一行显示多个。
|
||||
- `checkAll` 默认为 `false` 开启后支持全选
|
||||
- `defaultCheckAll` 是否默认全选,默认为`false`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="330" scope="form"
|
||||
|
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
- `type` 请设置成 `color`
|
||||
- `format` 请选择 `hex`、`hls`、`rgb`或者`rgba`。默认为 `hex`。
|
||||
- `presetColors` 选择器底部的默认颜色
|
||||
- 默认为`['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`,数组内为空则不显示默认颜色
|
||||
- `clearable` 是否显示清除按钮。
|
||||
|
||||
```schema:height="400" scope="form-item"
|
||||
|
|
|
@ -27,6 +27,7 @@ export interface ColorProps {
|
|||
classPrefix: string;
|
||||
classnames: ClassNamesFn;
|
||||
onChange: (value: any) => void;
|
||||
presetColors?: string[];
|
||||
}
|
||||
|
||||
export interface ColorControlState {
|
||||
|
@ -178,6 +179,7 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
|
|||
clearable,
|
||||
placement,
|
||||
classnames: cx,
|
||||
presetColors
|
||||
} = this.props;
|
||||
|
||||
const isOpened = this.state.isOpened;
|
||||
|
@ -236,6 +238,7 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
|
|||
<SketchPicker
|
||||
disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
|
||||
color={value}
|
||||
presetColors={presetColors}
|
||||
onChangeComplete={this.handleChange}
|
||||
/>
|
||||
</PopOver>
|
||||
|
|
|
@ -11,6 +11,7 @@ export interface ColorProps extends FormControlProps {
|
|||
format?: string;
|
||||
timeConstrainst?: object;
|
||||
closeOnSelect?:boolean;
|
||||
presetColors?: string[];
|
||||
};
|
||||
|
||||
export interface ColorControlState {
|
||||
|
|
Loading…
Reference in New Issue