test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:48:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

完善 tabs 的文档及示例

Browse Source
This commit is contained in:
wuduoyi 2020-10-28 23:32:33 +08:00
parent 71ced5fc95
commit aa19906293
3 changed files with 88 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/components/form/tabs.md
View File

@ -54,18 +54,15 @@ order: 53
]
}
]
}
}
]
}
```
## 更多功能
请参考[这里](../tabs)。
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ------------------------------------ | ------ | ------------------- |
| tabs | `Array` | | tabs 内容 |
| toolbar | [SchemaNode](../../types/schemanode) | | tabs 中的工具栏 |
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
| tabs[x].title | `string` | | Tab 标题 |
| tabs[x].body | [SchemaNode](../../types/schemanode) | | 内容容器 |
| tabs[x].controls | Array<[表单项](./formitem)> | | 表单项集合。 |
请参考[这里](../tabs#属性表)。

24
docs/components/tabs.md
View File

@ -98,6 +98,29 @@ order: 68
}
```
### 垂直
```schema:height="300" scope="body"
{
"type": "tabs",
"mode": "vertical",
"tabs": [
{
"title": "选项卡1",
"body": "选项卡内容1"
},
{
"title": "选项卡2",
"body": "选项卡内容2"
},
{
"title": "选项卡3",
"body": "选项卡内容3"
}
]
}
```
## 配置顶部工具栏
配置`toolbar`实现顶部工具栏。
@ -211,6 +234,7 @@ order: 68
| --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- |
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
| className | `string` | | 外层 Dom 的类名 |
| mode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical` |
| tabsClassName | `string` | | Tabs Dom 的类名 |
| tabs | `Array` | | tabs 内容 |
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |

29
examples/components/Tabs/Normal.jsx
View File

@ -158,6 +158,35 @@ export default {
body: '选项卡内容3'
}
]
},
{
type: 'divider'
},
{
type: 'tabs',
mode: 'vertical',
tabs: [
{
title: '选项卡1',
body: '选项卡内容1'
},
{
title: '选项卡2',
body: '选项卡内容2'
},
{
title: '选项卡3',
body: '选项卡内容3'
},
{
title: '选项卡4',
body: '选项卡内容4'
},
{
title: '选项卡5',
body: '选项卡内容5'
}
]
}
]
};