Package Exports
- rmc-tabs
- rmc-tabs/assets/index.css
- rmc-tabs/es/index
- rmc-tabs/es/index.native
- rmc-tabs/lib/index
- rmc-tabs/lib/index.native
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rmc-tabs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rmc-tabs
React Mobile Tabs Component (web & react-native), inspired by react-native-scrollable-tab-view
Screenshots
Development
npm i
npm start
Example
http://localhost:8000/examples/
online example: http://react-component.github.io/m-tabs/
install
docs
Usage
// 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><p>content1</p></div>
<div><p>content2</p></div>
<div><p>content3</p></div>
<div><p>content4</p></div>
<div><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
<StickyContainer>
<Tabs tabs={[
{ title: 't1' },
{ title: 't2' },
{ title: 't3' },
{ title: 't4' },
{ title: 't5' },
]} renderTabBar={(props) => {
return <Sticky style={{ zIndex: 1 }}>
<DefaultTabBar {...props} />
</Sticky>;
}}
>
...
</Tabs>
</StickyContainer>
react-native
./node_modules/rc-tools run react-native-init
react-native run-ios
API
Tabs:
属性 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
prefixCls | prefix class (web only) | string | rmc-tabs | false |
tabs | tabs data | Models.TabData[] | true | |
tabBarPosition | TabBar's position top, bottom | 'top' | 'bottom' // TODO left, right | top | false |
renderTabBar | replace the TabBar | ((props: TabBarPropsType) => React.ReactNode) | false | false | |
initialPage | the tab when inital, 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 | 使用跟手滚动 | 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 | (tabData: Models.TabData, index: number) => void | false | |
tabBarUnderlineStyle | style of the default tab bar's underline | React.CSSProperties | any | false | |
tabBarBackgroundColor | color of the default tab bar's background | string | false | |
tabBarActiveTextColor | color of the default tab bar's text when active | string | false | |
tabBarInactiveTextColor | color of the default tab bar's text when inactive | string | false | |
tabBarTextStyle | tional styles to the tab bar's text | React.CSSProperties | any | false | |
onTabClick | on tab click | (tab: Models.TabData, index: number) => void | false |
TabBarPropsType(Common):
属性 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
goToTab | call this function to switch tab | (index: number) => void | true | |
tabs | tabs data | Models.TabData[] | true | |
activeTab | current active tab | number | true | |
animated | Whether to change tabs with animation | boolean | true | |
tabBarPosition | TabBar's position | 'top' | 'bottom' // TODO left, right | false | |
onTabClick | on tab click | (tab: Models.TabData, index: number) => void | false |
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rmc-tabs is released under the MIT license.