Miss any of our Open RFC calls?Watch the recordings here! »

@whatoplay/react-tab-scroller

0.8.0 • Public • Published

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.

Install

npm i @whatoplay/react-tab-scroller

DownloadsWeekly Downloads

0

Version

0.8.0

License

MIT

Unpacked Size

74.8 kB

Total Files

16

Last publish

Collaborators

  • avatar
  • avatar
  • avatar