test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: Tabs组件title支持schema

Browse Source
This commit is contained in:
sqzhou 2023-06-19 15:15:42 +08:00
parent 099c9a6ea7
commit 489243974d
2 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/zh-CN/components/tabs.md
View File

@ -722,6 +722,40 @@ order: 68
} }
``` ```
## tab的label自定义
通过配置 tabs 数组中 title 为 schema，就能自定义 label 的显示。
```schema: scope="body"
{
"type": "tabs",
"addBtnText": "新增Tab",
"tabs": [
{
"title": {
"type": "container",
"body": [
{
"type": "tpl",
"tpl": "这里是容器内容区"
},
{
"type": "icon",
"icon": "cloud"
}
]
},
"closable": true,
"tab": "Content 1"
},
{
"title": "Tab 2",
"tab": "Content 2"
}
]
}
```
## 配置超出折叠 ## 配置超出折叠
通过配置 `collapseOnExceed` 可以用来实现超出折叠，额外还能通过 `collapseBtnLabel` 配置折叠按钮的文字 通过配置 `collapseOnExceed` 可以用来实现超出折叠，额外还能通过 `collapseBtnLabel` 配置折叠按钮的文字
@ -807,7 +841,7 @@ order: 68
| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 | | source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 |
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 | | toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |
| toolbarClassName | `string` | | tabs 中工具栏的类名 | | toolbarClassName | `string` | | tabs 中工具栏的类名 |
| tabs[x].title | `string` | | Tab 标题 | | tabs[x].title | `string` \| 'SchemaNode' | | Tab 标题 |
| tabs[x].icon | `icon` | | Tab 的图标 | | tabs[x].icon | `icon` | | Tab 的图标 |
| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 | | tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 |
| tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 | | tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 |

2
packages/amis/src/renderers/Tabs.tsx
View File

@ -714,7 +714,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
) { ) {
const {render} = this.props; const {render} = this.props;
return isObject(title) && title return isObject(title) && title
? render(`tab-title/${index}`, title, {...data}) ? render(`tab-title/${index}`, title, data)
: filter(title, data); : filter(title, data);
} }