Edit in GitHubLog an issue

ColorPicker component

The ColorPicker component uses the Spectrum and tinycolor.js libraries to make it easier to choose and implement color values. The ColorPicker component must be a child of the Listing or Form components.

Options

OptionDescriptionTypeDefault Value
colorFormat
Defines the color format displayed in the selection tool and input field. Valid formats: hex, rgb, hsl, hsv, name, none
string
-
colorPickerMode
Defines the mode that affects the available color picker functionality. Valid modes: simple, full, noalpha, palette
string
-
elementTmpl
The path to the .html template of the particular field type (color-picker).
string
ui/form/element/color-picker
label
Option's label.
string
-

Sources files

Examples

Copied to your clipboard
<form>
...
<colorPicker name="colors_filter" class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/color-picker">
<settings>
<label translate="true">Color</label>
<elementTmpl>ui/form/element/color-picker</elementTmpl>
<colorFormat>rgb</colorFormat>
<colorPickerMode>full</colorPickerMode>
<dataScope>colors_filter</dataScope>
</settings>
</colorPicker>
...
</form>

Result

Color Picker Component

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.