Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@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. |
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
FAQs
The Material Components for the web tab scroller component
The npm package @material/tab-scroller receives a total of 709,476 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.