tabs

Tabs ui component for react

Jul 14, 2018
Tabs ui component for react

rc-tabs

Tabs ui component for react.

View Documentation Download Source

Example

http://localhost:8000/examples

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:

nametypedefaultdescription
activeKeyStringcurrent active tabPanel's key
tabBarPositionStringtab nav 's position. one of ['left','right','top','bottom']
defaultActiveKeyStringfirst active tabPanel's keyinitial active tabPanel's key if activeKey is absent
renderTabBar():React.NodeHow to render tab bar
renderTabContent():React.NodeHow to render tab content
navWrapper(tabContent: React.Node):React.NodeWrapper function that will wrap around tab panes, whould be useful for features such as drag and drop
onChange(key: string): voidcalled when tabPanel is changed
destroyInactiveTabPaneBooleanfalsewhether destroy inactive tabpane when change tab
prefixClsStringrc-tabsprefix class name, use to custom style

TabPane

props:

nametypedefaultdescription
keyObjectcorresponding to activeKey, should be unique
styleObject
placeholderReact.Nodelazyrender children
tabReact.Nodecurrent tab's title corresponding to current tabPane
forceRenderBooleanfalseforced render of content in tabs, not lazy render after clicking on tabs

lib/TabBar

nametypedefaultdescription
onTabClick(key: string, event: MouseEvent): voidcallback when tab clicked
stylebar style
extraContentReact Nodeextra content placed one the right of tab bar
tabBarGutternumberthe gap between tabs

lib/InkTabBar

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

nametypedefaultdescription
styles{ inkBar }can set inkBar style

lib/ScrollableTabBar

scrollable tab bar, in addition to tab bar props, extra props:

nametypedefaultdescription
onPrevClick(e: Event): voidcallback when prev button is clicked
onNextClick(e: Event): voidcallback when next button is clicked

lib/ScrollableInkTabBar

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

lib/SwipeableInkTabBar (Use for Mobile)

swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.

nametypedefaultdescription
pageSizenumber5show how many tabs at one page
speednumber5swipe speed, 1 to 10, more bigger more faster
hammerOptionsObjectoptions for react-hammerjs

lib/TabContent

nametypedefaultdescription
styleObjecttab content style
animatedBooleantruewhether tabpane change with animation
animatedWithMarginBooleanfalsewhether animate tabpane with css margin

lib/SwipeableTabContent

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

nametypedefaultdescription
hammerOptionsObjectoptions 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

GitHub

Recommended