Color Swatches¶

This webcomponent is allowing user to pick single or multiple colors form provided color-items. Clicking on any one of them dispatches a custom event which contains information about which color or colors were picked, other components may listen to this event and perform some actions.

To work properly h-color-swatches requires to manually add one or many h-color-item

Attributes¶

Attribute name	Type	Default	Description
`multiple` (optional)	boolean	false	Allows to choose more than one color

Public methods¶

Method name	Parameters	Return type	Description
`selectColors()`	HColorItem[ ] `\|` HColorItem	void	Select or deselect colors according to the passed parameter
`clearAllColors()`	null	void	Clear all selected colors

DOM Events¶

This webcomponent listens to the following DOM events:

This webcomponent also dispatches the following DOM events:

change

Example¶

sourceoutput

<h-color-swatches multiple>
    <h-color-item color="#048A81"></h-color-item>
    <h-color-item color="#8A89C0"></h-color-item>
    <h-color-item color="#54C6EB"></h-color-item>
</h-color-swatches>

<h-color-swatches multiple class="color-swatches">
    <h-color-item color="#048A81" tabindex="0" role="button" aria-label="#048A81" class="color-item color-swatches__color-item" style="background-color: rgb(4, 138, 129);"></h-color-item>
    <h-color-item color="#8A89C0" tabindex="0" role="button" aria-label="#8A89C0" class="color-item color-swatches__color-item" style="background-color: rgb(138, 137, 192);"></h-color-item>
    <h-color-item color="#54C6EB" tabindex="0" role="button" aria-label="#54C6EB" class="color-item color-swatches__color-item" style="background-color: rgb(84, 198, 235);"></h-color-item>
</h-color-swatches>