0.8.0 • Published 5 years ago

@whatoplay/react-tab-scroller v0.8.0

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

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 NameTypeDescription
alignStartbooleanIf true aligns the initial scroll position to the first tab.
alignEndbooleanIf true aligns the initial scroll position to the last tab.
alignCenterbooleanIf true aligns the initial scroll position to the middle tab.
classNamestringClasses to appear on root element.
onWheelfunctionCallback triggered on wheel event.
onTouchStartfunctionCallback triggered on touchstart event.
onPointerDownfunctionCallback triggered on pointerdown event.
onMouseDownfunctionCallback triggered on mousedown event.
onKeyDownfunctionCallback triggered on keydown event.
onTransitionEndfunctionCallback triggered on transitionend event.