0.8.0 • Published 7 years ago
@whatoplay/react-tab-scroller v0.8.0
React Tab Scroller
A React version of an MDC Tab Scroller.
Installation
npm install @material/react-tab-scrollerUsage
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. |
0.8.0
7 years ago