mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-04 21:19:01 +08:00
404 lines
10 KiB
Markdown
404 lines
10 KiB
Markdown
---
|
||
title: Collapse 折叠器
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Collapse 折叠器
|
||
icon:
|
||
order: 36
|
||
---
|
||
|
||
## 基本用法
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "3",
|
||
"header": "标题3",
|
||
"body": "这里是内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 手风琴模式
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"accordion": true,
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "3",
|
||
"header": "标题3",
|
||
"body": "这里是内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 自定义图标
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"expandIcon": {
|
||
"type": "icon",
|
||
"icon": "caret-right"
|
||
},
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "3",
|
||
"header": "标题3",
|
||
"body": "这里是内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 设置图标位置
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"expandIconPosition": "right",
|
||
"activeKey": ["1"],
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "3",
|
||
"header": "标题3",
|
||
"body": "这里是内容3"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 面板嵌套
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": {
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "嵌套面板标题",
|
||
"body": "嵌套面板内容"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 折叠面板禁用
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"disabled": true,
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 折叠面板图标隐藏
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"showArrow": false,
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 类FieldSet样式
|
||
|
||
当Collapse组件作为Form组件的子元素时，`enableFieldSetStyle`属性可以控制Collapse组件样式风格，开启后转换为类似[FieldSet组件](./form/fieldset)的样式，默认开启。
|
||
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"body": [
|
||
{
|
||
"type": "switch",
|
||
"name": "enableFieldSetStyle",
|
||
"label": "切换展示方式",
|
||
"mode": "horizontal",
|
||
"value": true
|
||
},
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": ["1"],
|
||
"enableFieldSetStyle": "${enableFieldSetStyle}",
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"header": "标题1",
|
||
"body": "这里是内容1"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": "这里是内容2"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "3",
|
||
"header": "标题3",
|
||
"body": "这里是内容3"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## CollapseGroup 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||
| ------------------ | ------------------------------------------------------ | ------------------ | ----------------------------------- | --- |
|
||
| type | `string` | `"collapse-group"` | 指定为 collapse-group 渲染器 |
|
||
| activeKey | `Array<string \| number \| never> \| string \| number` | - | 初始化激活面板的 key |
|
||
| accordion | `boolean` | `false` | 手风琴模式 |
|
||
| expandIcon | `SchemaNode` | - | 自定义切换图标 |
|
||
| expandIconPosition | `string` | `"left"` | 设置图标位置，可选值`left \| right` |
|
||
| enableFieldSetStyle | `boolean` | `true` | 当Collapse作为Form组件的子元素时，开启该属性后组件样式设置为FieldSet组件的样式，默认开启 | `3.5.0` |
|
||
|
||
|
||
## CollapseGroup 事件表
|
||
|
||
当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。
|
||
|
||
| 事件名称 | 事件参数 | 说明 |
|
||
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
|
||
| change | `activeKeys: Array<string \| number>` 当前展开的索引列表 <br /> `collapseId: string \| number` 折叠器索引 <br/> `collapsed: boolean` 折叠器状态 | 折叠面板折叠状态改变时触发 |
|
||
|
||
### change
|
||
|
||
折叠面板折叠状态改变时触发。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse-group",
|
||
"activeKey": [
|
||
"1"
|
||
],
|
||
"body": [
|
||
{
|
||
"type": "collapse",
|
||
"key": "1",
|
||
"active": true,
|
||
"header": "标题1",
|
||
"body": [
|
||
{
|
||
"type": "tpl",
|
||
"tpl": "这里是内容1",
|
||
"wrapperComponent": "",
|
||
"inline": false,
|
||
"id": "u:757ad799da08"
|
||
}
|
||
],
|
||
"id": "u:b1b68dfbb08d"
|
||
},
|
||
{
|
||
"type": "collapse",
|
||
"key": "2",
|
||
"header": "标题2",
|
||
"body": [
|
||
{
|
||
"type": "tpl",
|
||
"tpl": "这里是内容1",
|
||
"wrapperComponent": "",
|
||
"inline": false,
|
||
"id": "u:92caa03f227e"
|
||
}
|
||
],
|
||
"id": "u:621a22c8b18c"
|
||
}
|
||
],
|
||
"id": "u:23e4c5ec9c89",
|
||
"onEvent": {
|
||
"change": {
|
||
"weight": 0,
|
||
"actions": [
|
||
{
|
||
"actionType": "toast",
|
||
"args": {
|
||
"msgType": "info",
|
||
"position": "top-right",
|
||
"closeButton": true,
|
||
"showIcon": true,
|
||
"title": "折叠状态改变",
|
||
"msg": "activeKeys: ${event.data.activeKeys | json}, collapseId: ${event.data.collapseId}, collapsed: ${event.data.collapsed}",
|
||
"className": "theme-toast-action-scope"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## Collapse 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||
| --------- | ---------------------- | ------------ | ---------------------- | --- |
|
||
| type | `string` | `"collapse"` | 指定为 collapse 渲染器 |
|
||
| disabled | `boolean` | `false` | 禁用 |
|
||
| collapsed | `boolean` | `true` | 初始状态是否折叠 |
|
||
| key | `string \| number` | - | 标识 |
|
||
| header | `string \| SchemaNode` | - | 标题 |
|
||
| body | `string \| SchemaNode` | - | 内容 |
|
||
| showArrow | `boolean` | `true` | 是否展示图标 |
|
||
|
||
## Collapse 事件表
|
||
|
||
当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。
|
||
|
||
| 事件名称 | 事件参数 | 说明 |
|
||
| -------- | ------------------------------- | ------------------------ |
|
||
| change | `collapsed: boolean` 折叠器状态 | 折叠器折叠状态改变时触发 |
|
||
|
||
### change
|
||
|
||
折叠面板折叠状态改变时触发。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "collapse",
|
||
"header": "标题",
|
||
"body": [
|
||
{
|
||
"type": "tpl",
|
||
"tpl": "内容",
|
||
"wrapperComponent": "",
|
||
"inline": false,
|
||
"id": "u:6588c12ee3b0"
|
||
}
|
||
],
|
||
"id": "u:62aa2f0c7fd9",
|
||
"onEvent": {
|
||
"change": {
|
||
"weight": 0,
|
||
"actions": [
|
||
{
|
||
"actionType": "toast",
|
||
"args": {
|
||
"msgType": "info",
|
||
"position": "top-right",
|
||
"closeButton": true,
|
||
"showIcon": true,
|
||
"title": "collapsedChange",
|
||
"msg": "collapsed: ${event.data.collapsed}",
|
||
"className": "theme-toast-action-scope"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
```
|