mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:18:29 +08:00
810 lines
22 KiB
Markdown
Executable File
810 lines
22 KiB
Markdown
Executable File
---
|
||
title: Tabs 选项卡
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Tabs
|
||
icon:
|
||
order: 68
|
||
---
|
||
|
||
选项卡容器组件。
|
||
|
||
## 基本用法
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
默认想要显示多少选项卡配置多少个 `tabs` 成员即可。但是有时候你可能会想根据某个数据来动态生成。这个时候需要额外配置 `source` 属性如。
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"data": {
|
||
"arr": [
|
||
{
|
||
"a": "收入",
|
||
"b": 199
|
||
},
|
||
|
||
{
|
||
"a": "支出",
|
||
"b": 299
|
||
}
|
||
]
|
||
},
|
||
|
||
"body": [
|
||
{
|
||
"type": "tabs",
|
||
"source": "${arr}",
|
||
"tabs": [
|
||
{
|
||
"title": "${a}",
|
||
"body": {
|
||
"type": "tpl",
|
||
"tpl": "金额：${b|number}元"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 拖拽排序
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"draggable": true,
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
},
|
||
{
|
||
"title": "Tab 3",
|
||
"tab": "Content 3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 可增加、删除
|
||
|
||
`tab` 设置的 `closable` 优先级高于整体。使用 `addBtnText` 设置新增按钮文案
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"closable": true,
|
||
"addable": true,
|
||
"addBtnText": "新增Tab",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1",
|
||
"closable": false
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 可编辑标签名
|
||
|
||
双击标签名，可开启编辑
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"editable": true,
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1",
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
},
|
||
{
|
||
"title": "双击编辑",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 可禁用
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2",
|
||
"disabled": true
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 显示提示
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"showTip": true,
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 作为表单项的值
|
||
|
||
如果在表单里给 tabs 配置了 name，它可以作为一个表单提交项的值，默认情况下会取 title
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "tabs",
|
||
"name": "tab",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
如果不想使用 title，可以给每个 tab 设置 value，这样就会取这个 value 作为表单项的值
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "tabs",
|
||
"name": "tab",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1",
|
||
"value": 0
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2",
|
||
"value": 1
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 展示模式
|
||
|
||
### 简约
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "simple",
|
||
"tabs": [
|
||
{
|
||
"title": "简约(10)",
|
||
"body": "选项卡内容1",
|
||
"icon": "fa fa-home"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 加强
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "strong",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 线型
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "line",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 卡片
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "card",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 仿 Chrome
|
||
|
||
仿 Chrome tab 样式
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "chrome",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 水平铺满
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "tiled",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
},
|
||
{
|
||
"title": "选项卡4",
|
||
"body": "选项卡内容4"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 选择器型
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "radio",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 垂直
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "vertical",
|
||
"tabs": [
|
||
{
|
||
"title": "选项卡1",
|
||
"body": "选项卡内容1"
|
||
},
|
||
{
|
||
"title": "选项卡2",
|
||
"body": "选项卡内容2"
|
||
},
|
||
{
|
||
"title": "选项卡3",
|
||
"body": "选项卡内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 侧边栏模式
|
||
|
||
使用 `sidePosition` 设置标签栏位置。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "sidebar",
|
||
"sidePosition": "right",
|
||
"tabs": [
|
||
{
|
||
"title": "按钮",
|
||
"body": "选项卡内容1",
|
||
"icon": "fa fa-square"
|
||
},
|
||
{
|
||
"title": "动作",
|
||
"body": "选项卡内容2",
|
||
"icon": "fa fa-gavel"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 配置顶部工具栏
|
||
|
||
配置`toolbar`实现顶部工具栏。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"toolbar": [
|
||
{
|
||
"type": "button",
|
||
"label": "按钮",
|
||
"size": "sm",
|
||
"actionType": "dialog",
|
||
"dialog": {
|
||
"title": "弹窗标题",
|
||
"body": "你点击了"
|
||
}
|
||
}
|
||
],
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 配置 hash
|
||
|
||
可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"hash": "tab1",
|
||
"tab": "Content 1"
|
||
},
|
||
|
||
{
|
||
"title": "Tab 2",
|
||
"hash": "tab2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 默认显示某个选项卡
|
||
|
||
主要配置`activeKey`属性来实现该效果，共有下面两种方法：
|
||
|
||
#### 配置 hash 值
|
||
|
||
支持变量，如 `"tab${id}"`
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"activeKey": "tab2",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"hash": "tab1",
|
||
"tab": "Content 1"
|
||
},
|
||
|
||
{
|
||
"title": "Tab 2",
|
||
"hash": "tab2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
#### 配置索引值
|
||
|
||
单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。支持变量，如`"${id}"`
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"activeKey": 1,
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 动态设置选项卡
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"data": {
|
||
"key": 2
|
||
},
|
||
"body": [
|
||
{
|
||
"type": "radios",
|
||
"name": "key",
|
||
"mode": "inline",
|
||
"label": "激活的选项卡",
|
||
"options": [
|
||
{
|
||
"label": "Tab 1",
|
||
"value": 0
|
||
},
|
||
{
|
||
"label": "Tab 2",
|
||
"value": 1
|
||
},
|
||
{
|
||
"label": "Tab 3",
|
||
"value": 2
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "tabs",
|
||
"activeKey": "${key|toInt}",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
},
|
||
{
|
||
"title": "Tab 3",
|
||
"tab": "Content 3"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 初始化设置默认选项卡
|
||
|
||
> 2.7.1 以上版本
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"data": {
|
||
"defaultKey": 1,
|
||
"activeKey": 2
|
||
},
|
||
"body": [
|
||
{
|
||
"type": "radios",
|
||
"name": "key",
|
||
"mode": "inline",
|
||
"label": "激活的选项卡",
|
||
"options": [
|
||
{
|
||
"label": "Tab 1",
|
||
"value": 0
|
||
},
|
||
{
|
||
"label": "Tab 2",
|
||
"value": 1
|
||
},
|
||
{
|
||
"label": "Tab 3",
|
||
"value": 2
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "tabs",
|
||
"activeKey": "${activeKey|toInt}",
|
||
"defaultKey": "${defaultKey|toInt}",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
},
|
||
{
|
||
"title": "Tab 3",
|
||
"tab": "Content 3"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
> 初始化组件时 `defaultKey` 优先级高于 `activeKey`，但 `defaultKey` 仅作用于组件初始化时，不会响应上下文数据变化。
|
||
|
||
## 图标
|
||
|
||
通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1",
|
||
"icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg"
|
||
},
|
||
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 配置超出折叠
|
||
|
||
通过配置 `collapseOnExceed` 可以用来实现超出折叠，额外还能通过 `collapseBtnLabel` 配置折叠按钮的文字
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"tabsMode": "tiled",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"tab": "Content 1",
|
||
},
|
||
|
||
{
|
||
"title": "Tab 2",
|
||
"tab": "Content 2"
|
||
},
|
||
|
||
{
|
||
"title": "Tab 3",
|
||
"tab": "Content 3",
|
||
},
|
||
|
||
{
|
||
"title": "Tab 4",
|
||
"tab": "Content 4"
|
||
},
|
||
|
||
{
|
||
"title": "Tab 5",
|
||
"tab": "Content 5"
|
||
}
|
||
],
|
||
|
||
"collapseOnExceed": 3
|
||
}
|
||
```
|
||
|
||
## mountOnEnter
|
||
|
||
只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。
|
||
|
||
## unmountOnExit
|
||
|
||
如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`"unmountOnExit": true`。
|
||
|
||
## 监听切换事件
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "tabs",
|
||
"activeKey": "tab2",
|
||
"onSelect": "alert(key)",
|
||
"tabs": [
|
||
{
|
||
"title": "Tab 1",
|
||
"hash": "tab1",
|
||
"tab": "Content 1"
|
||
},
|
||
{
|
||
"title": "Tab 2",
|
||
"hash": "tab2",
|
||
"tab": "Content 2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
会传递 key 参数和 props
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| --------------------- | --------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------- |
|
||
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
|
||
| defaultKey | `string` / `number` | | 组件初始化时激活的选项卡，hash 值或索引值，支持使用表达式 `2.7.1 以上版本` |
|
||
| activeKey | `string` / `number` | | 激活的选项卡，hash 值或索引值，支持使用表达式，可响应上下文数据变化 |
|
||
| className | `string` | | 外层 Dom 的类名 |
|
||
| tabsMode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical`、`chrome`、`simple`、`strong`、`tiled`、`sidebar` |
|
||
| tabsClassName | `string` | | Tabs Dom 的类名 |
|
||
| tabs | `Array` | | tabs 内容 |
|
||
| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 |
|
||
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |
|
||
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
|
||
| tabs[x].title | `string` | | Tab 标题 |
|
||
| tabs[x].icon | `icon` | | Tab 的图标 |
|
||
| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 |
|
||
| tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 |
|
||
| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |
|
||
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
|
||
| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |
|
||
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
|
||
| tabs[x].closable | `boolean` | false | 是否支持删除，优先级高于组件的 `closable` |
|
||
| tabs[x].disabled | `boolean` | false | 是否禁用 |
|
||
| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |
|
||
| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |
|
||
| addable | `boolean` | false | 是否支持新增 |
|
||
| addBtnText | `string` | 增加 | 新增按钮文案 |
|
||
| closable | `boolean` | false | 是否支持删除 |
|
||
| draggable | `boolean` | false | 是否支持拖拽 |
|
||
| showTip | `boolean` | false | 是否支持提示 |
|
||
| showTipClassName | `string` | `'' ` | 提示的类 |
|
||
| editable | `boolean` | false | 收否可编辑标签名 |
|
||
| scrollable | `boolean` | true | 是否导航支持内容溢出滚动。（属性废弃） |
|
||
| sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 |
|
||
| collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 |
|
||
| collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 |
|
||
|
||
## 事件表
|
||
|
||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||
|
||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||
|
||
| 事件名称 | 事件参数 | 说明 |
|
||
| -------- | ------------------------------------- | ---------------- |
|
||
| change | `[name]: number \| string` 选项卡索引 | 切换选项卡时触发 |
|
||
|
||
## 动作表
|
||
|
||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||
|
||
| 动作名称 | 动作配置 | 说明 |
|
||
| --------------- | ---------------------------------------- | ---------------- |
|
||
| changeActiveKey | `activeKey: number \| string` 选项卡索引 | 激活指定的选项卡 |
|