thumbnail-bar
The <cylindo-thumbnail-bar> is a web component that shows a thumbnail bar for a <cylindo-viewer>.
It either needs to be passed as a child element of the <cylindo-viewer>, or have its for attribute pointing to it.
If "indicators" is passed in the controls attribute of the <cylindo-viewer> while presentation="gallery", the thumbnail bar will be replaced by indicators.
Attributes
for
This attribute is optional. If specified, it allows the thumbnail-bar to be detached from the viewer.
Its value takes an id that must point to the <cylindo-viewer>.
CSS Variables
--item-gap
The gap between the thumbnail items.
| Default value | Options |
|---|---|
10px | Any CSS size |
--chevron-color
The color of the chevrons icons.
| Default value | Options |
|---|---|
#435d6d | Any CSS color |
--chevron-bg-color-hover
The background color of the chevrons icons on hover.
| Default value | Options |
|---|---|
#e7edf1 | Any CSS color |
--chevron-bg-color-active
The background color of the chevrons icons when active.
| Default value | Options |
|---|---|
#c6cacd | Any CSS color |
--chevron-outline-disabled
Outline of a disabled chevron button.
| Default value | Options |
|---|---|
none | css outline |
--icon-color
The color of the 360 and model icons.
| Default value | Options |
|---|---|
#435d6d | Any CSS color |
--icon-bg-color
The background color of the 360 and model icons.
| Default value | Options |
|---|---|
#abafad26 | Any CSS color |
--item-border-color-active
The border color of the active item.
| Default value | Options |
|---|---|
#9bb0be | Any CSS color |
--item-border-color-hover
The border color of the hovered item.
| Default value | Options |
|---|---|
#ccd5da | Any CSS color |
Parts
The CSS pseudo-element :part allows to control the css of elements within the shadow tree that has a matching part attribute.
chevron-left
The chevron-left is passed to the chevron icon of the <cylindo-thumbnail-bar> button used to select the previous item.
chevron-right
The chevron-right is passed to the chevron icon of the <cylindo-thumbnail-bar> button used to select the next item.
item
The item part is passed to all the items (<button> elements) of <cylindo-thumbnail-bar>. If you're changing the size and positioning of these element, make sure to changed the item-skeleton element accordingly.
item-skeleton
The item-skeleton part is passed to the 4 placeholder items of <cylindo-thumbnail-bar>, displayed when the items are loading.
Slots
If you are unfamiliar with the slot attribute of the web components, please read more about it in this page.
360 & model
If you want to change the icons of the thumbnail bar, the slots 360 and model allow you respectively to pass your own 360 and model icons to the <cylindo-thumbnail-bar>.
You can see a live example here