RibbonColorPickerSettings API in JavaScript Ribbon API control

Defines the ribbon color picker.

Properties

columns

number

Defines the number of columns to be rendered in the color picker palette.

Defaults to 10

cssClass

string

Defines one or more CSS classes to customize the appearance of the color picker.

Defaults to ”

enableOpacity

boolean

Defines whether to enable the opacity option in the color picker.

Defaults to true

mode

ColorPickerMode

Defines the rendering mode of the color picker.

Defaults to ‘Picker’

modeSwitcher

boolean

Defines whether to show / hide the mode switcher button in the color picker.

Defaults to true

noColor

boolean

Defines whether to enable / disable the palette section in the color picker.

Defaults to false

presetColors

{ [key: string]: string[] }

Defines the custom colors to load in the color picker palette.

Defaults to null

showButtons

boolean

Defines whether to show / hide the control buttons (apply / cancel) in the color picker.

Defaults to true

value

string

Specifies the value of the color picker. The value should be a valid hex color code.

Defaults to ‘#008000ff’

Events

beforeClose

EmitType<BeforeOpenCloseEventArgs>

Event triggers before closing the ColorPicker popup.

beforeOpen

EmitType<BeforeOpenCloseEventArgs>

Event triggers before opening the ColorPicker popup.

beforeTileRender

EmitType<PaletteTileEventArgs>

Event triggers while rendering each palette tile.

change

EmitType<ChangeEventArgs>

Event triggers while changing the colors. It will be triggered based on the showButtons property. If the property is false, the event will be triggered while selecting the colors. If the property is true, the event will be triggered while apply the selected color.

created

EmitType<Event>

Event triggers once the color picker is created.

open

EmitType<OpenEventArgs>

Event triggers while opening the ColorPicker popup.

select

EmitType<ColorPickerEventArgs>

Event triggers while selecting the color in picker / palette, when showButtons property is enabled.