JSPM

  • Created
  • Published
  • Downloads 20916
  • Score
    100M100P100Q147477F

React Mobile Tabs Component(web)

Package Exports

  • rmc-tabs
  • rmc-tabs/assets/index.css
  • rmc-tabs/es/index
  • rmc-tabs/lib/index

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)

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 tabData={[
    { key: 't1', title: 't1' },
    { key: 't2', title: 't2' },
    { key: 't3', title: 't3' },
    { key: 't4', title: 't4' },
    { key: 't5', title: 't5' },
]} initalTab={'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 tabData={[
    { title: 't1' },
    { title: 't2' },
    { title: 't3' },
    { title: 't4' },
    { title: 't5' },
]} onChangeTab={(index, tab) => {
    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 tabData={[
    { 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>

API

Tabs:

属性 说明 类型 默认值 必选
prefixCls 样式前缀(web only) string rmc-tabs false
style 样式 React.CSSProperties false
tabs tab数据 Models.TabData[] true
tabBarPosition TabBar位置 top: 上, bottom: 下 'top' | 'bottom' // TODO left, right top false
renderTabBar 替换TabBar (props: TabBarPropsType) => React.ReactNode false
initalPage 初始化Tab, index or key number | string false
page 当前Tab, index or key number | string false
swipeable 是否可以滑动内容切换 boolean true false
prerenderingSiblingsNumber 预加载两侧Tab数量 number 0 false
animated 是否开启切换动画 boolean true false
onChangeTab tab变化时触发 (index: number, tabData: Models.TabData) => void false

TabBarPropsType(Common):

属性 说明 类型 默认值 必选
goToTab 跳转Tab (index: number) => void true
tabs tab数据 Models.TabData[] true
activeTab 当前激活Tab索引 number true
animated 是否使用动画 boolean true
tabBarPosition TabBar位置 top: 上, bottom: 下 'top' | 'bottom' // TODO left, right 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.