Skip to main content

ColorPalettePopover

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.
Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"
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.
TypeHTMLElement | string | 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

close​

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

Methods​

showAt​

DescriptionShows the ColorPalettePopover.
Return typevoid
Parametersopener: HTMLElement
the element that the popover is shown at
Since1.1.1
DeprecatedThe method is deprecated in favour of open and opener properties.

openPopover​

DescriptionShows the ColorPalettePopover.
Return typevoid
Parametersopener: HTMLElement
the element that the popover is shown at
Since1.0.0-rc.16
DeprecatedThe method is deprecated in favour of open and opener properties.

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.