Skip to content

yesmeck/tabs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rc-tabs


React Tabs

NPM version build status Test coverage gemnasium deps npm download

Screenshot

Example

http://localhost:8000/examples

online example: http://react-component.github.io/tabs/

install

rc-tabs

Feature

Keyboard

  • left and up: switch to previous tab
  • right and down: switch to next tab

Usage

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'));

API

Tabs

props:

name type default description
activeKey String current active tabPanel's key
tabBarPosition String tab nav 's position. one of ['left','right','top','bottom']
defaultActiveKey String first active tabPanel's key initial active tabPanel's key if activeKey is absent
renderTabBar ():React.Node How to render tab bar
renderTabContent ():React.Node How to render tab content
onChange (key: string): void called when tabPanel is changed
destroyInactiveTabPane Boolean false whether destroy inactive tabpane when change tab

TabPane

props:

name type default description
key Object corresponding to activeKey
style Object
placeholder React.Node lazyrender children
tab React.Node current tab's title corresponding to current tabPane

lib/TabBar

name type default description
onTabClick (key: string): void callback when tab clicked
style bar style
extraContent React Node extra content placed one the right of tab bar

lib/InkTabBar

tab bar with ink indicator, in addition to tab bar props, extra props:

name type default description
styles { inkBar } can set inkBar style

lib/ScrollableInkTabBar

scrollable tab bar with ink indicator, same with tab bar/ink bar props.

lib/TabContent

name type default description
style {} tab content style
animated true whether tabpane change with animation

lib/SwipeableTabContent

swipeable tab panes, in addition to lib/TabContent props, extra props:

name type default description
hammerOptions {} options for react-hammerjs

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.

Packages

No packages published

Languages

  • JavaScript 80.1%
  • CSS 19.9%