React Mobile Tabs Component (web & react-native), inspired by react-native-scrollable-tab-view
npm i
npm start
http://localhost:8000/examples/
online example: http://react-component.github.io/m-tabs/
// normal
<Tabs tabs={[
{ key: 't1', title: 't1' },
{ key: 't2', title: 't2' },
{ key: 't3', title: 't3' },
{ key: 't4', title: 't4' },
{ key: 't5', title: 't5' },
]} initalPage={'t2'}
>
<div key="t1"><p>content1</p></div>
<div key="t2"><p>content2</p></div>
<div key="t3"><p>content3</p></div>
<div key="t4"><p>content4</p></div>
<div key="t5"><p>content5</p></div>
</Tabs>
// single content
<Tabs tabs={[
{ title: 't1' },
{ title: 't2' },
{ title: 't3' },
{ title: 't4' },
{ title: 't5' },
]} onChange={(tab, index) => {
this.setState({
scData: JSON.stringify({ index: index + Math.random(), tab })
});
}}
>
<div>
<p>single content</p>
<p>{this.state.scData}</p>
</div>
</Tabs>
// single content function
<Tabs tabs={[
{ title: 't1' },
{ title: 't2' },
{ title: 't3' },
{ title: 't4' },
{ title: 't5' },
]}
>
{
(index, tab) =>
<div>
<p>single content</p>
<p>{JSON.stringify({ index: index + Math.random(), tab })}</p>
</div>
}
</Tabs>
// renderTabBar e.g: Sticky, react-sticky
./examples/sticky.tsx
npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios
属性 | 说明 | 类型 | 默认值 | 必选 | |||
---|---|---|---|---|---|---|---|
tabs | tabs data | Models.TabData[] | true | ||||
tabBarPosition | TabBar's position | 'top' \ | 'bottom' \ | 'left' \ | 'right' | top | false |
renderTabBar | render for TabBar | ((props: TabBarPropsType) => React.ReactNode) \ | false | false | |||
initialPage | initial Tab, index or key | number \ | string | false | |||
page | current tab, index or key | number \ | string | false | |||
swipeable | whether to switch tabs with swipe gestrue in the content | boolean | true | false | |||
useOnPan (web only ) |
use scroll follow pan | boolean | true | false | |||
prerenderingSiblingsNumber | pre-render nearby # sibling, Infinity: render all the siblings, 0: render current page | number | 1 | false | |||
animated | whether to change tabs with animation | boolean | true | false | |||
onChange | callback when tab is switched | (tab: Models.TabData, index: number) => void | false | ||||
onTabClick | on tab click | (tab: Models.TabData, index: number) => void | false | ||||
destroyInactiveTab | destroy inactive tab | boolean | false | false | |||
distanceToChangeTab | distance to change tab, width ratio | number | 0.3 | false | |||
usePaged | use paged | boolean | true | false | |||
tabDirection | tab paging direction | 'horizontal' \ | 'vertical' | horizontal | false | ||
tabBarUnderlineStyle | tabBar underline style | React.CSSProperties \ | any | false | |||
tabBarBackgroundColor | tabBar background color | string | false | ||||
tabBarActiveTextColor | tabBar active text color | string | false | ||||
tabBarInactiveTextColor | tabBar inactive text color | string | false | ||||
tabBarTextStyle | tabBar text style | React.CSSProperties \ | any | false |
属性 | 说明 | 类型 | 默认值 | 必选 | |||
---|---|---|---|---|---|---|---|
goToTab | call this function to switch tab | (index: number) => void | true | ||||
tabs | tabs data | Models.TabData[] | true | ||||
activeTab | current active tab | number | true | ||||
animated | use animate | boolean | true | true | |||
renderTab | render the tab of tabbar | (tab: Models.TabData) => React.ReactNode | false | ||||
page | page size of tabbar's tab | number | 5 | false | |||
onTabClick | on tab click | (tab: Models.TabData, index: number) => void | false | ||||
tabBarPosition | tabBar's position defualt: top | 'top' \ | 'bottom' \ | 'left' \ | 'right' | false | |
tabBarUnderlineStyle | tabBar underline style | React.CSSProperties \ | any | false | |||
tabBarBackgroundColor | tabBar background color | string | false | ||||
tabBarActiveTextColor | tabBar active text color | string | false | ||||
tabBarInactiveTextColor | tabBar inactive text color | string | false | ||||
tabBarTextStyle | tabBar text style | React.CSSProperties \ | any | false |
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rmc-tabs is released under the MIT license.