Lm-tab NPM | npm.io

tab

作者：winber
邮箱：winberxie@163.com
版本：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`	文本描述必传属性