Skip to main content

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.

info

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

Related example

direction

This attribute is optional. When set to "vertical", it allows the thumbnail bar to be displayed vertically.

The vertical direction is only supported on detached mode.

Default valueOptions
"horizontal""horizontal" "vertical"

Related example

CSS Variables

--item-gap

The gap between the thumbnail items.

Default valueOptions
10pxAny CSS size

--chevron-color

The color of the chevrons icons.

Default valueOptions
#435d6dAny CSS color

--chevron-bg-color-hover

The background color of the chevrons icons on hover.

Default valueOptions
#e7edf1Any CSS color

--chevron-bg-color-active

The background color of the chevrons icons when active.

Default valueOptions
#c6cacdAny CSS color

--chevron-outline-disabled

Outline of a disabled chevron button.

Default valueOptions
nonecss outline

--icon-color

The color of the 360 and model icons.

Default valueOptions
#435d6dAny CSS color

--icon-bg-color

The background color of the 360 and model icons.

Default valueOptions
#abafad26Any CSS color

--item-border-color-active

The border color of the active item.

Default valueOptions
#9bb0beAny CSS color

--item-border-color-hover

The border color of the hovered item.

Default valueOptions
#ccd5daAny 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