Skip to main content

ColorPalette

<ui5-color-palette> | Since 1.0.0-rc.12

The ui5-color-palette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.

Usage​

The ui5-color-palette is meant for users that need to select a color from a predefined set. To define the colors, use the ui5-color-palette-item component inside the default slot of the ui5-color-palette.

ES6 Module Import​

import "@ui5/webcomponents/dist/ColorPalette.js";

Basic Sample​

Properties​

accessibleName​

DescriptionDefines the accessible name of the component.
Typestring | undefined
Defaultundefined
Since2.20.0

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring | undefined
Defaultundefined
Since2.20.0

Slots​

default​

DescriptionDefines the ui5-color-palette-item elements.
TypeArray<ColorPaletteItem>

Events​

item-click​

DescriptionFired when the user selects a color.
TypeCustomEvent<ColorPaletteItemClickEventDetail>
Parameterscolor: string
the selected color
Since1.0.0-rc.15
BubblesNo
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.