Package Exports

@material/tab-scroller
@material/tab-scroller/component
@material/tab-scroller/component.js
@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/index.js
@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

@use "@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).

Sass Mixins

Mixin	Description
`transition($duration-ms, $timing-function)`	Sets the scroll animation duration and, optionally, the timing function.

`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 using animation.
`incrementScrollImmediate(scrollX: number) => void`	Increments the current scroll value by the scrollX value without animation.
`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`.
`computeScrollAreaClientRect() => ClientRect`	Returns the bounding client rect of the scroll area element.
`computeScrollContentClientRect() => ClientRect`	Returns the bounding client rect of the scroll content element.
`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
`getRTLScroller() => MDCTabScrollerRTL`	Creates an RTL Scroller instance for the current browser.
`getScrollPosition() => number`	Returns the current visual scroll position.
`handleInteraction() => void`	Responds to mouse, pointer, touch, and keyboard events.
`handleTransitionEnd(evt: Event) => void`	Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.
`incrementScroll(scrollX: number) => void`	Increments the current scroll value by the `scrollX` value.
`scrollTo(scrollX: number) => void`	Scrolls to the `scrollX` value.

`MDCTabScrollerRTL`

Abstract class with three concrete implementations depending on the browser:

MDCTabScrollerRTLDefault
MDCTabScrollerRTLNegative
MDCTabScrollerRTLReverse

Method Signature	Description
`getAnimatingScrollPosition(scrollX: number, translateX: number) => number`	Returns the current scroll position during animation.
`getScrollPositionRTL(translateX: number) => number`	Returns the number of px the user has scrolled horizontally, relative to the leading edge.
`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation`	Returns an object containing the values required to animate from the current scroll position to a new scroll position.
`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation`	Scrolls content horizontally to the given position in an RTL-friendly way.

@material/tab-scroller