New to KendoReactStart a free 30-day trial

FlatColorPickerProps

Represents the properties of FlatColorPicker component.

NameTypeDefaultDescription

activeView?

ColorPickerView

'gradient''

Sets the initially active view when both 'gradient' and 'palette' views are rendered. Use with the views property.

ariaLabel?

string

Represents the label of the FlatColorPicker component.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

className?

string

Sets additional classes to the FlatColorPicker.

defaultValue?

string

Sets the default color value.

disabled?

boolean

Determines whether the FlatColorPicker is disabled.

format?

"hex" | "rgba" | "rgb"

'rgb'

Sets the default input format in the gradient input editor.

React.ComponentType<undefined>

Sets custom header component.

id?

string

Sets the id property of the top div element of the FlatColorPicker.

onChange?

(event: FlatColorPickerChangeEvent) => void

The event handler that will be fired when the user click the "Apply" button or on blur when the "Apply" button is not present.

onPreviewChange?

(event: FlatColorPickerChangeEvent) => void

The event handler that will be fired when the user changes the preview color.

opacity?

boolean

true

Specifies whether we should display the opacity slider to allow selection of transparency.

showButtons?

boolean

Specifies whether action buttons will be rendered in the footer.

showClearButton?

boolean

Specifies whether clear button will be rendered in the header.

showPreview?

boolean

Specifies whether preview and revert color boxes will be rendered in the header.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the FlatColorPicker.

The available options are:

  • small
  • medium
  • large
  • null—This option removes the the built-in size styles of the FlatColorPicker. Allows for custom padding.

style?

React.CSSProperties

Sets additional CSS styles to the FlatColorPicker.

tabIndex?

number

Sets the tabIndex property of the FlatColorPicker.

value?

string

Sets the color value.

view?

"ColorGradient" | "ColorPalette"

Deprecated. Use views prop instead.

views?

ColorPickerView[]

['gradient', 'palette']`

Specifies the views that will be rendered. By default both the gradient and palette views will be rendered.

Not finding the help you need?
Contact Support