Swatches

A list container for swatch components. Renders a gb-list of gb-swatch components for each item passed down through the items property.

Provided Aliases: $swatches

Example

const items = [
  { color: 'red', label: 'red' }
  { color: 'yellow', label: 'yellow' },
  { color: 'blue', label: 'blue' },
  { color: 'green', label: 'green' }
];

<gb-swatches items="{ items }"></gb-swatches>

Properties

Property	Type	Description
`items`	any[]	The values to render in the swatches.
`onClick(index)`	function	The function triggered on each swatch click. index: number - the current index of the item being clicked.
`onChange(index, isActive)`	function	The function triggered on mouse hover. index: number - the current index of the item being hovered. isActive: boolean - true when change is active, false otherwise.

State

Property	Type	Description
`onClick(event)`	function	The onclick handler set on each individual swatch. Triggers the onClick() property function with the correct item index. event: MouseEvent - the MouseEvent triggered by clicking.
`onActivate(event)`	function	The onmouseenter handler set on each individual swatch. Triggers the onChange() property function with the current item index and true for isActive. event: MouseEvent - the MouseEvent triggered by mouse entering.
`onDeactivate(event)`	function	The onmouseleave handler set on each individual swatch. Triggers the onChange() property function with the current item index and false for isActive. event: MouseEvent - the MouseEvent triggered by mouse leaving.

Events

This component does not listen for any events.

Child Components: Swatch

Displays a single swatch, with a tooltip on hover.

Provided Aliases: $swatch,

Properties

Property	Type	Description
`color`	string	The color of the current swatch. Can be string, rgba, or hex value.
`image`	string	The image of the current swatch. Sets the background-url of the current swatch to the image value.
`label`	string	The label of the current swatch. Displayed in the tooltip on hover.
`onClick(index)`	function	The function triggered on click. index: number - the index of the item being clicked.

State

This component does not have any properties in state.

Events

This component does not listen for any events.