lm-tab

tab

• 作者：winber
• 邮箱：[e-mail]
• 版本：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

• init

0.2.0

• update react to version 16

0.3.0

• TabBarItem add customize

0.4.0

• update readme