1.1.0 • Published 7 years ago
m-tabs v1.1.0
m-tabs 选项卡/标签页
选项卡/标签页切换组件。
何时使用
TAB栏让用户可以在不同子任务、视图、模式之间切换, 它具有全局导航的作用，是全局功能的主要展示和切换区域，一个TAB标记一个核心功能，TAB之间可以快速点击切换
M-Sui Design 将选项卡分为两类：
- Tab Bar －A.常规样式（优先选用）:它的交互方式允许左右滑动，用于一定空间内无法置入全部标签内容的情况下使用，一栏最多可承载5个标签，多于5个标签时，可以把剩余标签以列表形式收在“选择”内； －B.CapsuleTAB 胶囊样式（局限性强，建议慎用）：可用嵌入头部导航条使用
- APP TAB:一般用于模拟原生app，
API
Tabs
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 初始化当前Tabs的 key | String | |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置则默认第一个 | String | 第一个面板 |
| onChange | 切换面板的回调 | Function | 无 |
| centered | 是否为嵌入式选项卡（底色橙色） | boolean | false |
| type | 页签的基本样式，可选 capsule、app 、nav | String | 'nav' |
Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 初始化当前TabPane的 key | String | 无 |
| tab | 选项卡头显示文字 | React.Element or String | 无 |