New to Kendo UI for Angular? Start a free 30-day trial

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

clearButton

boolean

(default: false) Specifies whether the ColorGradient should display a 'Clear color' button.

delay

number

(default: 0) Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.

disabled

boolean

(default: false) Sets the disabled state of the ColorGradient.

format

OutputFormat

Specifies the output format of the ColorGradientComponent. The input value may be in a different format, but it will be parsed into the output format after the component processes it.

The supported values are:

  • (Default) rgba
  • hex

opacity

boolean

(default: true) Defines whether the alpha slider will be displayed.

readonly

boolean

(default: false) Sets the read-only state of the ColorGradient.

contrastTool

string

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.

tabindex

number

(default: 0) Specifies the tabindex of the component.

value

string

Specifies the value of the initially selected color.

Fields

isFocused

boolean

Indicates whether the ColorGradient or any of its content is focused.

Events

valueChange

EventEmitter<string>

Fires each time the user selects a new color.

Methods

focus

Focuses the component.