closure-react-tab-scroller
v0.7.9
Published
Material Components React Tab Scroller
Downloads
12
Maintainers
Readme
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.