tab

• 作者：winber
• 邮箱：[email protected]
• 版本：0.4.0

介绍

tab切换组件

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-tab --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

• 普通写法的tab组件

<Tab onChange={(index) => {console.log('tab has changed')}}>
    <NavBar>
        <NavBarItem>选项一</NavBarItem>
        <NavBarItem>选项二</NavBarItem>
        <NavBarItem>选项三</NavBarItem>
    </NavBar>
    <TabBody>
        <TabBodyItem>选项一内容</TabBodyItem>
        <TabBodyItem>选项二内容</TabBodyItem>
        <TabBodyItem>选项三内容</TabBodyItem>
    </TabBody>
</Tab>

• 自动选择的tab组件(当使用自动选择的时，type必须指定为navBar)

<Tab type="navBar"  onChange={(index) => {console.log('tab has changed')}}>
    <NavBarItem label="nav1">
        <p>content1</p>
    </NavBarItem>
    <NavBarItem label="nav2">
        <p>content2</p>
    </NavBarItem>
    <NavBarItem label="nav3">
        <p>content3</p>
    </NavBarItem>
</Tab>

• tabBar的tab组件(普通写法)

<Tab type="tabBar" onChange={() => {console.log('tabBox has changed')}}>
    <TabBar>
        <TabBarItem activeIcon={icon1Active} icon={icon1} desc="普通" />
        <TabBarItem activeIcon={icon2Active} icon={icon2} desc="tab" />
        <TabBarItem activeIcon={icon3Active} icon={icon3} desc="nav" />
    </TabBar>
    <TabBody>
        <TabBodyItem>
            <p>content1</p>
        </TabBodyItem>
        <TabBodyItem>
            <p>content2</p>
        </TabBodyItem>
        <TabBodyItem>
            <p>content3</p>
        </TabBodyItem>
    </TabBody>
</Tab>

• tabBar的tab组件(自动)

<Tab type="tabBar" onChange={() => {console.log('tab2 has changed')}} defaultIndex={1}>
    <TabBarItem
        activeIcon={icon1Active}
        icon={icon1}
        desc="主页"
    >
        <p>1</p>
    </TabBarItem>
    <TabBarItem
        activeIcon={icon2Active}
        icon={icon2}
        desc="我的"
    >
        <p>2</p>
    </TabBarItem>
    <TabBarItem
        activeIcon={icon3Active}
        icon={icon3}
        desc="更多"
    >
        <p>3</p>
    </TabBarItem>
</Tab>

Tab配置参数（支持配置原生属性）

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | type | normal | normal | Tab的类型 | | onChange | func | undefined | 切换Tab触发事件 |

TabBarItem配置参数（支持配置原生属性）

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | activeIcon | image | undefined | 选中时的图片 必传属性| | icon | image | undefined | 未选中的图片 必传属性| | desc | string | undefined | 文本描述 必传属性|

NavBarItem配置参数（支持配置原生属性）

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | label | string | undefined | 标题 label的优先级高于children |

注意事项

• 当使用到TabBar的时候，Tab 的type属性必须为'tabBar'
• 当使用到自动的NavBar的时候，Tab 的type属性必须为'navBar'
• 如果需要修改默认样式则需要在 Tab 组件上面增加className属性，使用类选择器覆盖默认样式

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

0.2.0

1. update react to version 16

0.3.0

1. TabBarItem add customize

0.4.0

1. update readme