HScroller

import { HScroller, VScroller, Scroller } from 'cx/widgets';

Horizontal scrollers are commonly used with tabs when there are too many tabs to fit the screen. Use the scrollIntoViewSelector property to specify a CSS selector for the element that should be scrolled into view.

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

  <div className="flex gap-2 mt-4">
    <Button
      onClick={(e, { store }) => {
        store.set(m.tab, "tab1")
      }}
    >
      Go to Tab 1
    </Button>
    <Button
      onClick={(e, { store }) => {
        store.set(m.tab, "tab15")
      }}
    >
      Go to Tab 15
    </Button>
  </div>
</div> 
 export const model = {
  tab: "tab1",
}; 
 import { createModel } from "cx/data";
import { bind } from "cx/ui";
import { Button, HScroller, Tab } from "cx/widgets"; 

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

Configuration

Property	Type	Description
`horizontal`	`boolean`	Enable horizontal scrolling. Default is `true` for HScroller.
`vertical`	`boolean`	Enable vertical scrolling. Default is `true` for VScroller.
`scrollIntoViewSelector`	`string`	CSS selector for an element to scroll into view.
`baseClass`	`string`	Base CSS class. Default is `scroller`.