Skip to main content

ColorPalettePopover

<ui5-color-palette-popover> | Since 1.0.0-rc.16

Represents a predefined range of colors for easier selection.

Overview The ColorPalettePopover provides the users with a slot to predefine colors.

You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly. You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.

Usage​

The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.

For the ui5-color-palette-popover

ES6 Module Import​

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

Basic Sample​

Properties​

showRecentColors​

DescriptionDefines whether the user can see the last used colors in the bottom of the component
Typeboolean
Defaultfalse

showMoreColors​

DescriptionDefines whether the user can choose a custom color from a component.
Typeboolean
Defaultfalse

showDefaultColor​

DescriptionDefines whether the user can choose the default color from a button.
Typeboolean
Defaultfalse

defaultColor​

DescriptionDefines the default color of the component.
Note: The default color should be a part of the ColorPalette colors`
Typestring | undefined
Defaultundefined

open​

DescriptionDefines the open
Typeboolean
Defaultfalse
Since1.21.0

opener​

DescriptionDefines the ID or DOM Reference of the element that the popover is shown at. When using this attribute in a declarative way, you must only use the id (as a string) of the element at which you want to show the popover. You can only set the opener attribute to a DOM Reference when using JavaScript.
TypeHTMLElement | string | null | undefined
Defaultundefined
Since1.21.0

Slots​

default​

DescriptionDefines the content of the component.
TypeArray<IColorPaletteItem>

Events​

item-click​

DescriptionFired when the user selects a color.
TypeCustomEvent<ColorPalettePopoverItemClickEventDetail>
Parameterscolor: string
the selected color
BubblesYes
CancelableNo

close​

DescriptionFired when the ui5-color-palette-popover is closed due to user interaction.
TypeCustomEvent
Since1.21.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Show Default Color​

Show More&Recent Colors​

Recent colors shows the last five colors that have been selected. More colors opens a dialog to manually choose a color from a ColorPicker.