Reference Source
import {ColorInput} from '@adobe/coral-spectrum'
public class | source

ColorInputSwatch

Expression Extends:

class ColorInputSwatch extends BaseColorInputAbstractSubview(BaseComponent(HTMLElement))

A ColorInput Swatch component

See:

Example:

Markup
<coral-colorinput-swatch></coral-colorinput-swatch>
JS constructor
new Coral.ColorInput.Swatch();

Member Summary

Public Members
public

Whether the color preview is disabled or not.

public

Whether the Item is selected.

public

tabIndex: Integer

The tabindex of the color preview button.

public

The Coral.ColorInput.Item that the swatch is a visual representation of.

Public Members

public disabled: Boolean source

Whether the color preview is disabled or not.

  • false by default.
  • reflected

public selected: Boolean source

Whether the Item is selected.

  • false by default.
  • reflected

public tabIndex: Integer source

The tabindex of the color preview button. So that we don't wind up with nested focusable elements, the internal colorButton should should receive the tabIndex property, while the coral-colorinput-swatch should reflect the value using the _tabindex attribute.

  • -1 by default.
  • reflected

public targetColor: HTMLElement | String source

The Coral.ColorInput.Item that the swatch is a visual representation of. It accepts a DOM element or a CSS selector. If a CSS selector is provided, the first matching element will be used.

  • null by default.