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

Represents the props of the KendoVue ColorPalette component.

Definition

Package:@progress/kendo-vue-inputs

Properties

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

Sets the aria-label attribute of the ColorPalette.

Sets the IDs of the elements that label the ColorPalette.

class?

string

Sets additional CSS classes to the ColorPalette.

columns?

number

Sets the number of columns that the ColorPalette shows. Defaults to 10.

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

disabled?

boolean

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

id?

string

Sets the id of the wrapping element of the ColorPalette.

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

Sets the value of the ColorPalette when you use v-model. The ColorPalette emits update:modelValue when the user selects a color.

Fires each time the user selects a color. The event name is change.

Parameters:eventColorPaletteChangeEvent

onFocus?

(event: FocusEvent) => void

Fires when the ColorPalette gets the focus. The event name is focus.

Parameters:eventFocusEvent

palette?

string | string[]

Sets the colors that the ColorPalette shows.

The supported values are:

  • The name of a predefined palette preset (for example, office, basic, and apex).
  • A string array.
Default:

'office'

size?

"small" | "medium" | "large"

Configures the size of the ColorPalette.

The available options are:

  • small
  • medium
  • large
Default:

undefined

tabIndex?

number

Sets the tabIndex attribute of the ColorPalette.

Sets the size of a color cell in pixels. Defaults to 24.

value?

string

Sets the value of the ColorPalette. Use it to control the value.