Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Files

Latest commit

 

History

History

tab-scroller

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Nov 15, 2018
Aug 24, 2018
May 30, 2019
Jul 22, 2019

React Tab Scroller

A React version of an MDC Tab Scroller.

Installation

npm install @material/react-tab-scroller

Usage

Styles

with Sass:

import '@material/react-tab-scroller/index.scss';

with CSS:

import '@material/react-tab-scroller/dist/tab-scroller.css';

Javascript Instantiation

import React from 'react';
import TabScroller from '@material/react-tab-scroller';

class MyApp extends React.Component {
  render() {
    return (
      <TabScroller>
        <div className='tab'>Tab 1</div>
        <div className='tab'>Tab 2</div>
        <div className='tab'>Tab 3</div>
      </TabScroller>
    );
  }
}

Props

Prop Name Type Description
alignStart boolean If true aligns the initial scroll position to the first tab.
alignEnd boolean If true aligns the initial scroll position to the last tab.
alignCenter boolean If true aligns the initial scroll position to the middle tab.
className string Classes to appear on root element.
onWheel function Callback triggered on wheel event.
onTouchStart function Callback triggered on touchstart event.
onPointerDown function Callback triggered on pointerdown event.
onMouseDown function Callback triggered on mousedown event.
onKeyDown function Callback triggered on keydown event.
onTransitionEnd function Callback triggered on transitionend event.