Scrollable Tabs
The TabStrip allows you to scroll through its tabs when the tab list cannot fit in the component boundaries. It provides a rich API for customizing the scroll logic and the TabStrip appearance based on your preference.
Setup
To enable the scrolling of the tab list, set the scrollable prop to true.
The TabStrip enables you to configure the following options:
scrollButtons—Allows specifying the scroll buttons visibility. The default value isauto.scrollButtonsPosition—Sets the scroll buttons position according to the tab list. The default value issplit.buttonScrollSpeed—Sets the tab list scroll speed in pixels when clicking the scroll buttons. The default value is100px.prevButton—Allows specifying a custom component for thepreviousscroll button.nextButton—Allows specifying a custom component for thenextscroll button.
The following example demonstrates a scrollable TabStrip in action.
Configuring the Scroll Buttons Position
By default, the TabStrip renders its scroll buttons on both ends of the tab list. To customize this behavior, use the scrollButtonsPosition property of the TabStrip by passing the following values:
split(Default)—The scroll buttons will be rendered on both sides of the tab list.start—The scroll buttons will be rendered prior to the tab list.end—The scroll buttons will be rendered after the tab list.
The following example demonstrates this in action.
Configuring the Scroll Buttons Visibility
You can configure the TabStrip to display scroll buttons in the tab list. To customize this behavior, use the scrollButtons property of the TabStrip. This property accepts the following values:
auto(Default)—The scroll buttons will be automatically shown if the tabs do not fit inside the TabStrip boundaries, and hidden otherwise.visible—The scroll buttons will be constantly visible. If the tabs fit inside the TabStrip boundaries, the buttons will be disabled.hidden—The scroll buttons won't be displayed but the scroll is still available.
The following example demonstrates this in action.
Right-to-Left Support
The TabStrip allows you to change the direction of the content to right-to-left using its dir property.