ColorPickerProps
Represents the props of the Kendo UI for Vue ColorPicker component.
Definition
Package:@progress/kendo-vue-inputs
Properties
adaptive?
boolean
Renders the popup in adaptive mode on small screens when you set it to true.
false
adaptiveTitle?
string
Sets the title text of the adaptive popup.
ariaDescribedBy?
string
Sets the IDs of the elements that describe the ColorPicker, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.
ariaLabelledBy?
string
Sets the IDs of the elements that label the ColorPicker.
defaultValue?
string
Sets the initial value of the ColorPicker when you do not set value
(see example).
dir?
string
Sets the dir HTML attribute of the ColorPicker.
disabled?
boolean
Disables the ColorPicker when you set it to true
(see example).
fillMode?
"flat" | "solid" | "outline"
Configures the fillMode of the ColorPicker.
The available options are:
- solid
- outline
- flat
undefined
Configures the FlatColorPicker that the ColorPicker shows in its popup.
{}
Configures the ColorGradient that the ColorPicker shows in its popup.
{ opacity: true }
icon?
string
Sets the name of an existing icon in the Kendo UI for Vue theme (see example).
iconClassName?
string
Sets a CSS class that shows an icon in the ColorPicker button (see example).
id?
string
Sets the id of the wrapping element of the ColorPicker.
modelRgbaValue?
string
Sets the value of the ColorPicker in RGBA format when you use v-model:modelRgbaValue.
The ColorPicker emits update:modelRgbaValue when the user changes the color.
modelValue?
string
Sets the value of the ColorPicker when you use v-model.
The ColorPicker emits update:modelValue when the user changes the color.
onActivecolorclick?
(event: ColorPickerActiveColorClick) => void
Fires when the user clicks the color preview on the left side of the ColorPicker. The event name is activecolorclick.
onBlur?
(event: ColorPickerBlurEvent) => void
Fires when the ColorPicker loses the focus. The event name is blur.
onChange?
(event: ColorPickerChangeEvent) => void
Fires each time the user changes the value. The event name is change.
onFocus?
(event: ColorPickerFocusEvent) => void
Fires when the ColorPicker gets the focus. The event name is focus.
open?
boolean
Opens or closes the ColorPicker popup. Use it to control the open state.
Configures the ColorPalette that the ColorPicker shows in its popup (see example).
{ palette: 'office' }
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 index of the selected view in the ColorPicker popup. The default is 0.
showButtons?
boolean
Renders the action buttons in the popup footer when you set it to true.
true
showClearButton?
boolean
Renders the clear button in the popup header when you set it to true.
true
showPreview?
boolean
Renders the preview and revert color boxes in the popup header when you set it to true.
true
size?
"small" | "medium" | "large"
Configures the size of the ColorPicker.
The available options are:
- small
- medium
- large
undefined
svgIcon?
SVGIcon
Sets an SVG icon that the ColorPicker renders in its button.
tabIndex?
number
Sets the tabIndex attribute of the ColorPicker.
0
title?
string
Sets the title attribute of the ColorPicker.
valid?
boolean
Overrides the validity state of the ColorPicker.
When you set valid, the ColorPicker ignores the required property.
true
value?
string
Sets the value of the ColorPicker. Use it to control the value.
view?
string
Sets the view that the ColorPicker renders in the popup (see example).
'combo'