Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@material/tab-scroller
Advanced tools
The Material Components for the web tab scroller component
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
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, whenmdc-tab--min-width
is used on each tab).
Mixin | Description |
---|---|
transition($duration-ms, $timing-function) | Sets the scroll animation duration and, optionally, the timing function. |
MDCTabScroller
MethodsMethod 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. |
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. |
FAQs
The Material Components for the web tab scroller component
The npm package @material/tab-scroller receives a total of 668,611 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.