Analytics & Reports
Analytics

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 Default 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 Required 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 Required 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.