HScroller

import {HScroller} from 'cx/widgets';

Horizontal scrollers are commonly used with tabs, in scenarios when there are too many tabs to fit the screen.

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Tab 6 Tab 7 Tab 8 Tab 9 Tab 10 Tab 11 Tab 12 Tab 13 Tab 14 Tab 15 Tab 16

Use the scrollIntoViewSelector field to specify a CSS selector used to find an element which should be scrolled into view.

HScroller

<HScroller scrollIntoViewSelector=".cxb-tab.cxs-active">
    <Tab tab="tab1" value-bind="$page.tab" default>Tab 1</Tab>
    <Tab tab="tab2" value-bind="$page.tab">Tab 2</Tab>
    <Tab tab="tab3" value-bind="$page.tab">Tab 3</Tab>
    <Tab tab="tab4" value-bind="$page.tab" disabled>Tab 4</Tab>
    <Tab tab="tab5" value-bind="$page.tab">Tab 5</Tab>
    <Tab tab="tab6" value-bind="$page.tab">Tab 6</Tab>
    <Tab tab="tab7" value-bind="$page.tab">Tab 7</Tab>
    <Tab tab="tab8" value-bind="$page.tab" disabled>Tab 8</Tab>
    <Tab tab="tab9" value-bind="$page.tab">Tab 9</Tab>
    <Tab tab="tab10" value-bind="$page.tab">Tab 10</Tab>
    <Tab tab="tab11" value-bind="$page.tab">Tab 11</Tab>
    <Tab tab="tab12" value-bind="$page.tab" disabled>Tab 12</Tab>
    <Tab tab="tab13" value-bind="$page.tab">Tab 13</Tab>
    <Tab tab="tab14" value-bind="$page.tab">Tab 14</Tab>
    <Tab tab="tab15" value-bind="$page.tab">Tab 15</Tab>
    <Tab tab="tab16" value-bind="$page.tab" disabled>Tab 16</Tab>
</HScroller>

//example
<Button onClick={(e, {store}) => { store.set("$page.tab", "tab1")}}>Go to Tab 1</Button>
<Button onClick={(e, {store}) => { store.set("$page.tab", "tab15")}}>Go to Tab 15</Button>

Copied!Cx Fiddle

Configuration

Property	Description	Type
scrollIntoViewSelector	A CSS selector used to find an element which should be scrolled into view.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

HScroller