Namespace: cq-swatch

WebComponents. cq-swatch

Swatch web component <cq-swatch>.

An interactive color swatch. Relies on the existence of a CIQ.UI.ColorPicker component. 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


Swatch#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;