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
- [x] [css样式层级问题]
- [x] [动态计算样式]
- [x] [autoprefix] 产出工具集成
- [x] [测试用例]