cylindo-swatch

The <cylindo-swatch> is used to embed a material swatch into your <cylindo-viewer>.

Related example

Attributes

alt

Alternative text for the viewer. This is used by screen readers.

Default value	Options
""	string

customer-id

The customer ID for this material swatch. Usually you will not need to set this attribute, as it will fall back to the customer ID from the <cylindo-viewer>.

display-mode

Configures how the material swatch is displayed in the content area of the Viewer. Defaults to "cover-viewer".

Option	Description
"cover-viewer"	Fills the viewer's viewport, possibly altering aspect ratio.
"fit-inside-viewer"	Maintains the original aspect ratio within the viewport.

feature-code

The feature-code to display in the swatch. You can find a list of features on your products in the CMS.

zoomable

Enables zoom functionality and displays buttons for zooming in and out.

Default value	Options
"false"	"true" | "false"

thumbnail-crop

Configures how the swatch thumbnail gets displayed in the thumbnail-bar. The value comprises of 3 to 4 numbers between 0 and 1 separated by a comma, in the following order:

"x, y, width, height (optional)"

• x, y: the relative position of the top left corner of the crop
• width: the relative width of the crop
• height (optional): the relative height of the crop. It will default to width if omitted.

info

The default value is intended to show the zoomed-in details of a material. If you want the thumbnail to preview the full pattern of the material, pass "0, 0, 1" instead.

Default value	Options
"0.03125, 0.03125, 0.0625"	"number, number, number[, number]"