test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 12:29:24 +08:00
Code Issues Actions 3 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

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

@ -17,55 +17,52 @@ order: 53
"type": "form", "type": "form",
"debug": true, "debug": true,
"controls": [ "controls": [
{
"type": "tabs",
"tabs": [
{ {
"type": "tabs", "title": "基本配置",
"tabs": [ "controls": [
{ {
"title": "基本配置", "name": "text1",
"controls": [ "type": "text",
{ "label": "文本1"
"name": "text1", },
"type": "text",
"label": "文本1" {
"name": "text2",
"type": "text",
"label": "文本2"
}
]
}, },
{ {
"name": "text2", "title": "其他配置",
"type": "text", "controls": [
"label": "文本2" {
} "name": "text3",
] "type": "text",
}, "label": "文本3"
},
{ {
"title": "其他配置", "name": "text4",
"controls": [ "type": "text",
{ "label": "文本4"
"name": "text3", }
"type": "text", ]
"label": "文本3"
},
{
"name": "text4",
"type": "text",
"label": "文本4"
} }
] ]
} }
] ]
}
]
} }
``` ```
## 更多功能
请参考[这里](../tabs)。
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | 请参考[这里](../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)> | | 表单项集合。 |

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`实现顶部工具栏。 配置`toolbar`实现顶部工具栏。
@ -211,6 +234,7 @@ order: 68
| --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- | | --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- |
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 | | type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
| className | `string` | | 外层 Dom 的类名 | | className | `string` | | 外层 Dom 的类名 |
| mode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical` |
| tabsClassName | `string` | | Tabs Dom 的类名 | | tabsClassName | `string` | | Tabs Dom 的类名 |
| tabs | `Array` | | tabs 内容 | | tabs | `Array` | | tabs 内容 |
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 | | toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |

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

@ -158,6 +158,35 @@ export default {
body: '选项卡内容3' 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'
}
]
} }
] ]
}; };