450 lines
11 KiB
Markdown
450 lines
11 KiB
Markdown
# rc-tabs
|
|
|
|
---
|
|
|
|
React Tabs
|
|
|
|
[![NPM version][npm-image]][npm-url]
|
|
[![build status][travis-image]][travis-url]
|
|
[![Test coverage][coveralls-image]][coveralls-url]
|
|
[![gemnasium deps][gemnasium-image]][gemnasium-url]
|
|
[![npm download][download-image]][download-url]
|
|
|
|
[npm-image]: http://img.shields.io/npm/v/rc-tabs.svg?style=flat-square
|
|
[npm-url]: http://npmjs.org/package/rc-tabs
|
|
[travis-image]: https://img.shields.io/travis/react-component/tabs.svg?style=flat-square
|
|
[travis-url]: https://travis-ci.org/react-component/tabs
|
|
[coveralls-image]: https://img.shields.io/coveralls/react-component/tabs.svg?style=flat-square
|
|
[coveralls-url]: https://coveralls.io/r/react-component/tabs?branch=master
|
|
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/tabs.svg?style=flat-square
|
|
[gemnasium-url]: https://gemnasium.com/react-component/tabs
|
|
[node-url]: http://nodejs.org/download/
|
|
[download-image]: https://img.shields.io/npm/dm/rc-tabs.svg?style=flat-square
|
|
[download-url]: https://npmjs.org/package/rc-tabs
|
|
|
|
## Screenshot
|
|
|
|
<img src='https://zos.alipayobjects.com/rmsportal/JwLASrsOYJuFRIt.png' width='408'>
|
|
|
|
## Example
|
|
|
|
http://localhost:8000/examples
|
|
|
|
online example: http://react-component.github.io/tabs/
|
|
|
|
## install
|
|
|
|
[](https://npmjs.org/package/rc-tabs)
|
|
|
|
## Feature
|
|
|
|
### Keyboard
|
|
|
|
- left and up: switch to previous tab
|
|
- right and down: switch to next tab
|
|
|
|
## Usage
|
|
|
|
```js
|
|
import Tabs, { TabPane } from "rc-tabs";
|
|
import TabContent from "rc-tabs/lib/TabContent";
|
|
import ScrollableInkTabBar from "rc-tabs/lib/ScrollableInkTabBar";
|
|
|
|
var callback = function(key) {};
|
|
|
|
React.render(
|
|
<Tabs defaultActiveKey="2" onChange={callback} renderTabBar={() => <ScrollableInkTabBar />} renderTabContent={() => <TabContent />}>
|
|
<TabPane tab="tab 1" key="1">
|
|
first
|
|
</TabPane>
|
|
<TabPane tab="tab 2" key="2">
|
|
second
|
|
</TabPane>
|
|
<TabPane tab="tab 3" key="3">
|
|
third
|
|
</TabPane>
|
|
</Tabs>,
|
|
document.getElementById("t2")
|
|
);
|
|
```
|
|
|
|
### Usage of navWrapper() function
|
|
|
|
navWrapper() prop allows to wrap tabs bar in a component to provide additional features.
|
|
Eg with react-sortablejs to make tabs sortable by DnD :
|
|
|
|
```js
|
|
import Sortable from 'react-sortablejs';
|
|
|
|
navWrapper={(content) => <Sortable>{content}</Sortable>}
|
|
```
|
|
|
|
## API
|
|
|
|
### Tabs
|
|
|
|
#### props:
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>activeKey</td>
|
|
<td>String</td>
|
|
<th></th>
|
|
<td>current active tabPanel's key</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tabBarPosition</td>
|
|
<td>String</td>
|
|
<th></th>
|
|
<td>tab nav 's position. one of ['left','right','top','bottom']</td>
|
|
</tr>
|
|
<tr>
|
|
<td>defaultActiveKey</td>
|
|
<td>String</td>
|
|
<th>first active tabPanel's key</th>
|
|
<td>initial active tabPanel's key if activeKey is absent</td>
|
|
</tr>
|
|
<tr>
|
|
<td>renderTabBar</td>
|
|
<td>():React.Node</td>
|
|
<th></th>
|
|
<td>How to render tab bar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>renderTabContent</td>
|
|
<td>():React.Node</td>
|
|
<th></th>
|
|
<td>How to render tab content</td>
|
|
</tr>
|
|
<tr>
|
|
<td>navWrapper</td>
|
|
<td>(tabContent: React.Node):React.Node</td>
|
|
<th></th>
|
|
<td>Wrapper function that will wrap around tab panes, whould be useful for features such as drag and drop</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onChange</td>
|
|
<td>(key: string): void</td>
|
|
<th></th>
|
|
<td>called when tabPanel is changed</td>
|
|
</tr>
|
|
<tr>
|
|
<td>destroyInactiveTabPane</td>
|
|
<td>Boolean</td>
|
|
<th>false</th>
|
|
<td>whether destroy inactive tabpane when change tab</td>
|
|
</tr>
|
|
<tr>
|
|
<td>prefixCls</td>
|
|
<td>String</td>
|
|
<th>rc-tabs</th>
|
|
<td>prefix class name, use to custom style</td>
|
|
</tr>
|
|
<tr>
|
|
<td>direction</td>
|
|
<td>String</td>
|
|
<th>ltr</th>
|
|
<td>Layout direction of tabs component, it supports RTL direction too.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### TabPane
|
|
|
|
#### props:
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>key</td>
|
|
<td>Object</td>
|
|
<th></th>
|
|
<td>corresponding to activeKey, should be unique</td>
|
|
</tr>
|
|
<tr>
|
|
<td>style</td>
|
|
<td>Object</td>
|
|
<th></th>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>placeholder</td>
|
|
<td>React.Node</td>
|
|
<th></th>
|
|
<td>lazyrender children</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tab</td>
|
|
<td>React.Node</td>
|
|
<th></th>
|
|
<td>current tab's title corresponding to current tabPane</td>
|
|
</tr>
|
|
<tr>
|
|
<td>forceRender</td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>forced render of content in tabs, not lazy render after clicking on tabs</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### lib/TabBar
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onTabClick</td>
|
|
<td>(key: string, event: MouseEvent): void</td>
|
|
<th></th>
|
|
<td>callback when tab clicked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>style</td>
|
|
<td></td>
|
|
<th></th>
|
|
<td>bar style</td>
|
|
</tr>
|
|
<tr>
|
|
<td>extraContent</td>
|
|
<td>React Node</td>
|
|
<th></th>
|
|
<td>extra content placed one the right of tab bar</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tabBarGutter</td>
|
|
<td>number</td>
|
|
<th></th>
|
|
<td>the gap between tabs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>keyboard</td>
|
|
<td>boolean</td>
|
|
<th>true</th>
|
|
<td>whether support keyboard to navigate tabs</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### lib/InkTabBar
|
|
|
|
tab bar with ink indicator, in addition to tab bar props, extra props:
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>styles</td>
|
|
<td>{ inkBar }</td>
|
|
<th></th>
|
|
<td>can set inkBar style</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### lib/ScrollableTabBar
|
|
|
|
scrollable tab bar, in addition to tab bar props, extra props:
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onPrevClick</td>
|
|
<td>(e: Event): void</td>
|
|
<th></th>
|
|
<td>callback when prev button is clicked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onNextClick</td>
|
|
<td>(e: Event): void</td>
|
|
<th></th>
|
|
<td>callback when next button is clicked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>prevIcon</td>
|
|
<td>ReactNode</td>
|
|
<th></th>
|
|
<td>specific the prev icon</td>
|
|
</tr>
|
|
<tr>
|
|
<td>nextIcon</td>
|
|
<td>ReactNode</td>
|
|
<th></th>
|
|
<td>specific the next icon</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### lib/ScrollableInkTabBar
|
|
|
|
scrollable tab bar with ink indicator, same with tab bar and ink bar and scrollable bar props.
|
|
|
|
| name | type | default | description |
|
|
| -------- | -------------- | ------- | ---------------------- |
|
|
| children | (node) => node | - | Customize tab bar node |
|
|
|
|
### lib/SwipeableInkTabBar (Use for Mobile)
|
|
|
|
swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>pageSize</td>
|
|
<td>number</td>
|
|
<th>5</th>
|
|
<td>show how many tabs at one page</td>
|
|
</tr>
|
|
<tr>
|
|
<td>speed</td>
|
|
<td>number</td>
|
|
<th>5</th>
|
|
<td>swipe speed, 1 to 10, more bigger more faster</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hammerOptions</td>
|
|
<td>Object</td>
|
|
<td></td>
|
|
<td>options for react-hammerjs</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### lib/TabContent
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>style</td>
|
|
<td>Object</td>
|
|
<td></td>
|
|
<td>tab content style</td>
|
|
</tr>
|
|
<tr>
|
|
<td>animated</td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>whether tabpane change with animation</td>
|
|
</tr>
|
|
<tr>
|
|
<td>animatedWithMargin</td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>whether animate tabpane with css margin</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
### lib/SwipeableTabContent
|
|
|
|
swipeable tab panes, in addition to lib/TabContent props, extra props:
|
|
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th>default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>hammerOptions</td>
|
|
<td>Object</td>
|
|
<td></td>
|
|
<td>options for react-hammerjs</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
## Note
|
|
|
|
If you want to support old browsers(which does not support flex/css-transition),
|
|
please load the following script inside head to add no-flexbox/no-csstransition css classes
|
|
|
|
```
|
|
https://as.alipayobjects.com/g/component/modernizr/2.8.3/modernizr.min.js
|
|
```
|
|
|
|
## Development
|
|
|
|
```
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
## Test Case
|
|
|
|
```
|
|
npm test
|
|
npm run chrome-test
|
|
```
|
|
|
|
## Coverage
|
|
|
|
```
|
|
npm run coverage
|
|
```
|
|
|
|
open coverage/ dir
|
|
|
|
## License
|
|
|
|
rc-tabs is released under the MIT license.
|