@material/tab-scroller
Advanced tools
Changelog
14.0.0 (2022-04-27)
unset is unsupported in IE. (f460e23)validateTooltipWithCaretDistances method. (3e30054)theme-styles mixin... the value being retreived from the $theme map and css property name was swapped. The mixin would request font-size/font-weight/letter-spacing from the $theme map (which expects size/weight/tracking)... so these values would always be null. (32b3913)attachTo. (05db65e)showTimeout is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)minRange param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)valueToAriaValueTextFn and valueToValueIndicatorTextFn functions are called for. (b6510c8)PiperOrigin-RevId: 444830518
PiperOrigin-RevId: 419837612
Readme
A Tab Scroller allows for smooth native and animated scrolling of tabs.
npm install @material/tab-scroller
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content"></div>
</div>
</div>
@use "@material/tab-scroller/mdc-tab-scroller";
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.
| 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
alignmodifier 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, whenmdc-tab--min-widthis used on each tab).
| 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. |
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 FunctionsMDC 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. |
MDCTabScrollerRTLAbstract class with three concrete implementations depending on the browser:
MDCTabScrollerRTLDefaultMDCTabScrollerRTLNegativeMDCTabScrollerRTLReverse| 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. |
FAQs
The Material Components for the web tab scroller component
The npm package @material/tab-scroller receives a total of 723,148 weekly downloads. As such, @material/tab-scroller popularity was classified as popular.
We found that @material/tab-scroller demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.