lm-tab/README.md

* 作者：winber * 邮箱：winberxie@163.com * 版本：**`0.4.0`**

# tab

* 作者：winber
* 邮箱：winberxie@163.com
* 版本：**`0.4.0`**

## 介绍

tab切换组件

---

## 安装

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

```
npm i lm-tab --save
```

- 如果你还没有安装 `npm`，可通过以下方式进行 [安装](https://nodejs.org/en/download/)。
- 安装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 组件开发规范](http://)

---

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

---