Package Exports

@material/tab-scroller
@material/tab-scroller/component
@material/tab-scroller/dist/mdc.tab-scroller.css
@material/tab-scroller/dist/mdc.tabScroller
@material/tab-scroller/dist/mdc.tabScroller.js
@material/tab-scroller/foundation
@material/tab-scroller/foundation.js
@material/tab-scroller/index
@material/tab-scroller/util
@material/tab-scroller/util.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/tab-scroller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tab Scroller

A Tab Scroller allows for smooth native and animated scrolling of tabs.

Design & API Documentation

Installation

npm install @material/tab-scroller

Basic Usage

HTML Structure

<div class="mdc-tab-scroller">
  <div class="mdc-tab-scroller__scroll-area">
    <div class="mdc-tab-scroller__scroll-content"></div>
  </div>
</div>

Styles

@import "@material/tab-scroller/mdc-tab-scroller";

JavaScript Instantiation

import {MDCTabScroller} from '@material/tab-scroller';

const tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));

See Importing the JS component for more information on how to import JavaScript.

Style Customization

CSS Classes

CSS Class	Description
`mdc-tab-scroller`	Mandatory. Contains the tab scroller content.
`mdc-tab-scroller__scroll-area`	Mandatory. Denotes the scrolling area.
`mdc-tab-scroller__scroll-content`	Mandatory. Denotes the scrolling content.
`mdc-tab-scroller--align-start`	Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.
`mdc-tab-scroller--align-end`	Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.
`mdc-tab-scroller--align-center`	Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.

NOTE: The align modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when mdc-tab--min-width is used on each tab).

`MDCTabScroller` Methods

Method Signature	Description
`scrollTo(scrollX: number) => void`	Scrolls to the scrollX value.
`incrementScroll(scrollX: number) => void`	Increments the current scroll value by the scrollX value.
`getScrollPosition() => number`	Returns the current visual scroll position.
`getScrollContentWidth() => number`	Returns the width of the scroll content element.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

`MDCTabScrollerAdapter`

Method Signature	Description
`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean`	Returns `true` if the given event target satisfies the given CSS selector.
`addClass(className: string) => void`	Adds a class to the root element.
`addScrollAreaClass(className: string) => void`	Adds a class to the scroll area element.
`removeClass(className: string) => void`	Removes a class from the root element.
`setScrollAreaStyleProperty(property: string, value: string) => void`	Sets the given style property on the scroll area element.
`setScrollContentStyleProperty(property: string, value: string) => void`	Sets the given style property on the scroll content element.
`getScrollContentStyleValue(property: string) => string`	Returns the given style property value on the scroll content element.
`setScrollAreaScrollLeft(scrollLeft: number) => void`	Sets the scroll area element's `scrollLeft`.
`getScrollAreaScrollLeft() => number`	Returns the scroll area element's `scrollLeft`.
`getScrollContentOffsetWidth() => number`	Returns the scroll content element's `offsetWidth`.
`getScrollAreaOffsetWidth() => number`	Returns the scroll area element's `offsetWidth`.
`computeHorizontalScrollbarHeight() => number`	Returns the height of the browser's horizontal scrollbars (in px).

`util` Functions

MDC Tab Scroller provides a util module with functions to help implement adapter methods.

Function Signature	Description
`computeHorizontalScrollbarHeight(document: Document) => number`	Returns the height of the browser's horizontal scrollbars (in px).

`MDCTabScrollerFoundation`

Method Signature	Description
`scrollTo(scrollX: number) => void`	Scrolls to the `scrollX` value.
`incrementScroll(scrollX: number) => void`	Increments the current scroll value by the `scrollX` value.
`getScrollPosition() => number`	Returns the current visual scroll position.

@material/tab-scroller