| 1 | # 页签 Tabs
|
| 2 |
|
| 3 | 分隔内容上有关联但属于不同类别的数据集合。
|
| 4 |
|
| 5 | ## 何时使用
|
| 6 |
|
| 7 | 例如：切换不同tab展示不同内容时
|
| 8 |
|
| 9 | ## 如何使用
|
| 10 |
|
| 11 | ```
|
| 12 | import { Tabs } from 'tinper-bee';
|
| 13 |
|
| 14 | or
|
| 15 |
|
| 16 | import Tabs from 'bee-tabs';
|
| 17 | import 'bee-tabs/build/Tabs.css';
|
| 18 |
|
| 19 | ```
|
| 20 |
|
| 21 | ## 代码演示
|
| 22 |
|
| 23 | ## API
|
| 24 |
|
| 25 | ### Tabs
|
| 26 |
|
| 27 | | 参数 | 说明 | 类型 | 默认值 |
|
| 28 | | :--------------------- | :--------------------------------------- | :---------------- | :------ |
|
| 29 | | activeKey | 设置当前激活的tabPanel的key | String | - |
|
| 30 | | tabBarPosition | tab头的定位，可以是['left','right','top','bottom']中选择 | String | - |
|
| 31 | | defaultActiveKey | 如果activeKey没有设置的时候，当初始化的时候设置当前激活的tabPanel的key | String | 默认激活第一个 |
|
| 32 | | renderTabBar | 怎样去渲染tab的头部 | ():React.Node | - |
|
| 33 | | renderTabContent | 怎样去渲染tab的内容区域 | ():React.Node | - |
|
| 34 | | onChange | tabPanel改变的时候的回调函数 | (key:string):void | - |
|
| 35 | | destroyInactiveTabPane | 是否在更改选项卡时销毁无效标签 | Boolean | false |
|
| 36 | | style | 添加到table上的style | String | u-tabs |
|
| 37 | | onTabClick | tab 被点击的回调 | fun | - |
|
| 38 | | className | 在tab组件上添加className | String | - |
|
| 39 | | extraContent | 在导航上添加扩展元素 | ():React.Node | - |
|
| 40 | | onPrevClick | 当出现滚动时，点击上一个时的回调函数 | Function | - |
|
| 41 | | onNextClick | 当出现滚动时，点击下一个时的回调函数 | Function | - |
|
| 42 | | animated | tab切换时，是否使用动画(1.0.8版本及其以后弃用，动画全部去掉) | bool | true |
|
| 43 | | tabBarStyle | tabBar样式选择，可以是['primary','simple','upborder','editable-card']中选择| String | 'simple'|
|
| 44 | | [v2.1.2新增]hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
|
| 45 | | [v2.1.2新增]onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |
|
| 46 |
|
| 47 | ### TabPane
|
| 48 |
|
| 49 | | 参数 | 说明 | 类型 | 默认值 |
|
| 50 | | ----------- | :-------------------------- | ----------------- | ----- |
|
| 51 | | key | 对应 activeKey | string | - |
|
| 52 | | tab | 选项卡头显示文字 | string\|ReactNode | - |
|
| 53 | | style | 选项卡样式 | Object | - |
|
| 54 | | forceRender | 在选项卡中强制渲染内容，而不是在单击选项卡后呈现延迟。 | Boolean | false |
|
| 55 | | placeholder | 懒加载时显示的内容 | React:Node | - |
|
| 56 |
|
| 57 |
|
| 58 | ### SearchTabs
|
| 59 |
|
| 60 | |参数|说明|类型|默认值|
|
| 61 | |:---|:-----|:----|:------|
|
| 62 | |onChange|数据改变的回调|func|-|
|
| 63 | |value|被选中的值|string|-|
|
| 64 |
|
| 65 | ### SearchTabs.Item
|
| 66 |
|
| 67 | |参数|说明|类型|默认值|
|
| 68 | |:---|:-----|:----|:------|
|
| 69 | |value|Item的标示|string|-|
|
| 70 |
|
| 71 |
|
| 72 | ## 注意事项
|
| 73 |
|
| 74 | 暂无
|
| 75 |
|
| 76 | ## 更新日志
|