bee-tabs

react bee-tabs component for tinper-bee

使用方法

<Tabs navtype="turn" contenttype="moveleft" defaultActiveKey="2">
	<TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
	<TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
	<TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
	<TabPanel tab="Tab 4" key="4">Content of Tab Pane 4</TabPanel>
</Tabs>

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
prefixCls	String	rc-tabs	prefix class name, use to custom style

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

src/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

src/InkTabBar

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

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

src/ScrollableTabBar

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

name	type	default	description
onPrevClick	(e: Event): void		callback when prev button is clicked
onNextClick	(e: Event): void		callback when next button is clicked

src/ScrollableInkTabBar

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

src/SwipeableInkTabBar (Use for Mobile)

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

name	type	default	description
pageSize	number	5	show how many tabs at one page
speed	number	5	swipe speed, 1 to 10, more bigger more faster
hammerOptions	Object		options for react-hammerjs

src/TabContent

name	type	default	description
style	Object		tab content style
animated	Boolean	true	whether tabpane change with animation
animatedWithMargin	Boolean	false	whether animate tabpane with css margin
forceRender	Boolean	false	forced render of content in tabs, not lazy render after clicking on tabs

src/SwipeableTabContent

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

name	type	default	description
hammerOptions	Object		options for react-hammerjs

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-tabs
$ cd bee-tabs
$ npm install
$ npm run dev

TODOS

• [css样式层级问题]
• [动态计算样式]
• [autoprefix] 产出工具集成
• [测试用例]