UI5 Web Components
Search

ColorPalette

v1.0.0-rc.12
@ui5/webcomponents
<ui5-color-palette>

Color Palette

<ui5-color-palette>
	<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
	<ui5-color-palette-item value="pink"></ui5-color-palette-item>
	<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
	<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
	<ui5-color-palette-item value="green"></ui5-color-palette-item>
	<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
	<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
	<ui5-color-palette-item value="blue"></ui5-color-palette-item>
	<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
	<ui5-color-palette-item value="orange"></ui5-color-palette-item>
	<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
	<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
</ui5-color-palette>

Overview

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";

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the ui5-color-palette-item elements.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
item-click
Fired when the user selects a color.
since v1.0.0-rc.15
color
type: string
description: the selected color

ColorPaletteItem

Overview

The ui5-color-palette-item component represents a color in the the ui5-color-palette.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
value
sap.ui.webc.base.types.CSSColor
Defines the colour of the component.

Note: The value should be a valid CSS color.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel