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

ColorGradient

Component

Represents the KendoVue ColorGradient component. Accepts properties of type ColorGradientProps. Use the ColorGradient to let the user pick a color from a color gradient, hue and alpha sliders, and inputs.

Definition

Package:@progress/kendo-vue-inputs

Properties Interface:ColorGradientProps

Syntax:

vue

<ColorGradient :default-value="'rgba(255, 99, 88, 1)'" :opacity="true" />

Properties

ariaDescribedBy?

string

Sets the IDs of the elements that describe the ColorGradient, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.

ariaLabel?

string

Sets the aria-label attribute of the ColorGradient.

ariaLabelledBy?

string

Sets the IDs of the elements that label the ColorGradient.

backgroundColor?

string

Enables the color contrast tool. Sets the background color that the tool compares to the selected value. The tool calculates the contrast ratio between the two colors. The tool supports only the RGBA format.

class?

string

Sets additional CSS classes to the ColorGradient.

defaultValue?

string

Sets the initial value of the ColorGradient when you do not set value.

disabled?

boolean

Disables the ColorGradient when you set it to true (more information and example).

id?

string

Sets the id of the wrapping element of the ColorGradient.

innerTabIndex?

number

Sets the tabIndex attribute of the inner elements of the ColorGradient, such as the drag handle, the sliders, and the inputs.

modelRgbaValue?

string

Sets the value of the ColorGradient in RGBA format when you use v-model:modelRgbaValue. The ColorGradient emits update:modelRgbaValue when the user changes the color.

modelValue?

string

Sets the value of the ColorGradient in HEX format when you use v-model. The ColorGradient emits update:modelValue when the user changes the color.