Swatch web component <cq-swatch>
.
An interactive color swatch. Relies on the existence of a CIQ.UI.ColorPicker component. Interactivity can be disabled by adding cq-static attribute
When a color is selected, setColor(color) will get called for any parent component with that method.
Example
<cq-section>
<cq-placeholder>
Candle Color
<cq-theme-piece cq-piece="cu">
<cq-swatch cq-overrides="Hollow"></cq-swatch>
</cq-theme-piece>
<cq-theme-piece cq-piece="cd">
<cq-swatch cq-overrides="Hollow"></cq-swatch>
</cq-theme-piece>
</cq-placeholder>
<cq-placeholder>
Candle Wick
<cq-theme-piece cq-piece="wu">
<cq-swatch></cq-swatch>
</cq-theme-piece>
<cq-theme-piece cq-piece="wd">
<cq-swatch></cq-swatch>
</cq-theme-piece>
</cq-placeholder>
<cq-placeholder>
Candle Border
<cq-theme-piece cq-piece="bu">
<cq-swatch cq-overrides="No Border"></cq-swatch>
</cq-theme-piece>
<cq-theme-piece cq-piece="bd">
<cq-swatch cq-overrides="No Border"></cq-swatch>
</cq-theme-piece>
</cq-placeholder>
<cq-separator></cq-separator>
<cq-placeholder>
Line/Bar Chart
<cq-theme-piece cq-piece="lc">
<cq-swatch></cq-swatch>
</cq-theme-piece>
</cq-placeholder>
<cq-separator></cq-separator>
<cq-placeholder>
Mountain Color
<cq-theme-piece cq-piece="mb">
<cq-swatch></cq-swatch>
</cq-theme-piece>
<cq-theme-piece cq-piece="mc">
<cq-swatch></cq-swatch>
</cq-theme-piece>
</cq-placeholder>
</cq-section>
Members
-
this.defaultColor :string
-
Optionally set the default color for the swatch.
Type:
- string
Methods
-
launchColorPicker()
-
-
setColor()
-
- Since:
-
6.2.0 Colors strip out the opacity so they are the rgb representation
-
Swatch#getDefaultColor()
-
Attempts to identify the default color for the associated chart. It does so by traversing up the parent stack and looking for any component that has a context. Or you can set the default color manually by setting member variable defaultColor;