JSPM

  • Created
  • Published
  • Downloads 20699
  • Score
    100M100P100Q150838F
  • License MIT

React Mobile Tabs Component(web & react-native)

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

NPM version react build status Test coverage gemnasium deps npm download

Screenshots

Development

npm i
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-tabs/

install

rmc-tabs

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

react-native

npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios

API

Tabs:

属性 说明 类型 默认值 必选
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

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

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-tabs is released under the MIT license.