ColorPickerProps
Represents the props of the Kendo UI for Vue ColorPicker component.
Definition
Package:@progress/kendo-vue-inputs
Properties
adaptive?
boolean
Providing different rendering of the popup element based on the screen dimensions.
adaptiveTitle?
string
Specifies the text that is rendered as title in the adaptive popup.
ariaDescribedBy?
string
Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.
ariaLabelledBy?
string
Identifies the element(s) which will label the component.
defaultValue?
string
The default value of the ColorPicker (see example).
dir?
string
Represents the dir HTML attribute.
disabled?
boolean
Sets the disabled state of the ColorPicker (see example).
fillMode?
"flat" | "solid" | "outline"
Configures the fillMode of the ColorPicker.
The available options are:
- solid
- outline
- flat
undefined
Configures the FlatColorPicker that is displayed in the ColorPicker popup.
Configures the ColorGradient that is displayed in the ColorPicker popup.
icon?
string
Defines the name of an existing icon in the Kendo UI for Vue theme. (see example).
iconClassName?
string
The class name which displays an icon in the ColorPicker button (see example).
id?
string
Specifies the id of the component.
modelRgbaValue?
string
The model rgba value of the ColorPicker.
modelValue?
string
Specifies the model value of the ColorPicker.
onActivecolorclick?
(event: ColorPickerActiveColorClick) => void
The event handler that will be fired when the left side of the ColorPicker is clicked.
onBlur?
(event: ColorPickerBlurEvent) => void
The event handler that will be fired when ColorPicker is blurred.
onChange?
(event: ColorPickerChangeEvent) => void
The event handler that will be fired when the user edits the value.
onFocus?
(event: ColorPickerFocusEvent) => void
The event handler that will be fired when ColorPicker is focused.
open?
boolean
Sets the open and close state of the ColorPicker.
Configures the ColorPalette that is displayed in the ColorPicker popup (see example).
Configures the popup of the ColorPicker.
rounded?
"small" | "medium" | "large" | "none" | "full"
Configures the roundness of the ColorPicker.
The available options are:
- none
- small
- medium
- large
- full
undefined
selectedView?
number
Sets the ColorPicker selected view index. The default is 0.
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?
"small" | "medium" | "large"
Configures the size of the ColorPicker.
The available options are:
- small
- medium
- large
undefined
svgIcon?
SVGIcon
Defines an SVGIcon to be rendered within the ColorPicker button.
tabIndex?
number
Sets the tabIndex property of the ColorPicker.
Defaults to 0.
title?
string
Sets the title property of the ColorPicker.
valid?
boolean
Overrides the validity state of the component.
If valid is set, the required property will be ignored.
value?
string
Specifies the value of the ColorPicker.
view?
string
Sets the view which the ColorPicker will render in the popup (see example).