cylindo-swatch
The <cylindo-swatch> is used to embed a material swatch into your <cylindo-viewer>.
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 cropwidth: the relative width of the cropheight(optional): the relative height of the crop. It will default towidthif omitted.
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]" |