ColorGradientComponent

Represents the Kendo UI ColorGradient component.

The ColorGradientComponent lets you select a color by moving a drag handle over a gradient area. You can use it directly or as part of the kendo-colorpicker.

html

<kendo-colorgradient [(ngModel)]="color"></kendo-colorgradient>

Selector

kendo-colorgradient

Export Name

Accessible in templates as #kendoColorGradientInstance="kendoColorGradient"

Inputs

Name	Type	Default	Description
clearButton	boolean	false	Shows or hides the Clear color button.
contrastTool	string		Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. See example.
delay	number	0	Sets the delay (in milliseconds) before the value changes on handle drag.
disabled	boolean	false	Disables the ColorGradient. To disable it in reactive forms, see Forms Support.
format	OutputFormat	'rgba'	Sets the output format of the ColorGradient. The input value may be in a different format, but it will be parsed into the output format after the component processes it.
gradientSliderSmallStep	number	2	Sets the step (in pixels) for moving the gradient drag handle with Shift+arrow keys.
gradientSliderStep	number	5	Sets the step (in pixels) for moving the gradient drag handle with the arrow keys.
opacity	boolean	true	Shows or hides the alpha slider.
readonly	boolean	false	Sets the read-only state of the ColorGradient.
size	InputSize	'medium'	Sets the size of the ColorGradient internal elements.
tabindex	number	0	Sets the tabindex of the component.
value	string		Sets the value of the selected color.

Fields

Name	Type	Default	Description
isFocused	boolean		Returns true if the component or its content is focused.

Events

Name	Type	Description
valueChange	EventEmitter<string>	Fires when the user selects a new color..

Methods

focus
Focuses the component.