Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@material/tab-scroller

Package Overview
Dependencies
Maintainers
15
Versions
1654
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/tab-scroller

The Material Components for the web tab scroller component

  • 14.0.0
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
747K
increased by0.17%
Maintainers
15
Weekly downloads
 
Created
Source

Tab Scroller

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

Design & API Documentation

  • Material Design guidelines: Scrollable Tabs
  • Demo

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 ClassDescription
mdc-tab-scrollerMandatory. Contains the tab scroller content.
mdc-tab-scroller__scroll-areaMandatory. Denotes the scrolling area.
mdc-tab-scroller__scroll-contentMandatory. Denotes the scrolling content.
mdc-tab-scroller--align-startOptional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.
mdc-tab-scroller--align-endOptional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.
mdc-tab-scroller--align-centerOptional. 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

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

MDCTabScroller Methods

Method SignatureDescription
scrollTo(scrollX: number) => voidScrolls to the scrollX value.
incrementScroll(scrollX: number) => voidIncrements the current scroll value by the scrollX value using animation.
incrementScrollImmediate(scrollX: number) => voidIncrements the current scroll value by the scrollX value without animation.
getScrollPosition() => numberReturns the current visual scroll position.
getScrollContentWidth() => numberReturns 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 SignatureDescription
eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => booleanReturns true if the given event target satisfies the given CSS selector.
addClass(className: string) => voidAdds a class to the root element.
addScrollAreaClass(className: string) => voidAdds a class to the scroll area element.
removeClass(className: string) => voidRemoves a class from the root element.
setScrollAreaStyleProperty(property: string, value: string) => voidSets the given style property on the scroll area element.
setScrollContentStyleProperty(property: string, value: string) => voidSets the given style property on the scroll content element.
getScrollContentStyleValue(property: string) => stringReturns the given style property value on the scroll content element.
setScrollAreaScrollLeft(scrollLeft: number) => voidSets the scroll area element's scrollLeft.
getScrollAreaScrollLeft() => numberReturns the scroll area element's scrollLeft.
getScrollContentOffsetWidth() => numberReturns the scroll content element's offsetWidth.
getScrollAreaOffsetWidth() => numberReturns the scroll area element's offsetWidth.
computeScrollAreaClientRect() => ClientRectReturns the bounding client rect of the scroll area element.
computeScrollContentClientRect() => ClientRectReturns the bounding client rect of the scroll content element.
computeHorizontalScrollbarHeight() => numberReturns 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 SignatureDescription
computeHorizontalScrollbarHeight(document: Document) => numberReturns the height of the browser's horizontal scrollbars (in px).

MDCTabScrollerFoundation

Method SignatureDescription
getRTLScroller() => MDCTabScrollerRTLCreates an RTL Scroller instance for the current browser.
getScrollPosition() => numberReturns the current visual scroll position.
handleInteraction() => voidResponds to mouse, pointer, touch, and keyboard events.
handleTransitionEnd(evt: Event) => voidResponds to a transitionend event on the mdc-tab-scroller__scroll-content element.
incrementScroll(scrollX: number) => voidIncrements the current scroll value by the scrollX value.
scrollTo(scrollX: number) => voidScrolls to the scrollX value.

MDCTabScrollerRTL

Abstract class with three concrete implementations depending on the browser:

  • MDCTabScrollerRTLDefault
  • MDCTabScrollerRTLNegative
  • MDCTabScrollerRTLReverse
Method SignatureDescription
getAnimatingScrollPosition(scrollX: number, translateX: number) => numberReturns the current scroll position during animation.
getScrollPositionRTL(translateX: number) => numberReturns the number of px the user has scrolled horizontally, relative to the leading edge.
incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimationReturns an object containing the values required to animate from the current scroll position to a new scroll position.
scrollToRTL(scrollX: number) => MDCTabScrollerAnimationScrolls content horizontally to the given position in an RTL-friendly way.

Keywords

FAQs

Package last updated on 28 Apr 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc