ColorGradientComponent
The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
The ColorGradient is independently used by kendo-colorpicker and can be directly added to the page.
Selector
kendo-colorgradient
Export Name
Accessible in templates as #kendoColorGradientInstance="kendoColorGradient"
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
clearButton |
|
|
Specifies whether the ColorGradient should display a 'Clear color' button. |
contrastTool |
|
Enables the color contrast tool. Accepts the background color that will be compared to the selected value. The tool will calculate the contrast ratio between the two colors. | |
delay |
|
|
Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay. |
disabled |
|
|
Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on Forms Support. |
format |
|
Specifies the output format of the ColorGradientComponent.
The input value may be in a different format, but it will be parsed into the output The supported values are:
| |
gradientSliderSmallStep |
|
|
Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key. |
gradientSliderStep |
|
|
Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys. |
opacity |
|
|
Defines whether the alpha slider will be displayed. |
readonly |
|
|
Sets the read-only state of the ColorGradient. |
tabindex |
|
|
Specifies the tabindex of the component. |
value |
|
Specifies the value of the initially selected color. |
Fields
| Name | Type | Default | Description |
|---|---|---|---|
isFocused |
|
Indicates whether the ColorGradient or any of its content is focused. |
Events
| Name | Type | Description |
|---|---|---|
valueChange |
|
Fires each time the user selects a new color. |
Methods
focus |
|---|
|
Focuses the component. |
