mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
4dfb286507
* feat: 组件折叠面板collapse * feat: 组件折叠面板collapse * fix: collapse组件部分抽象到component * feat:增加collapse-group组件 * fix: 修复collapse样式 * feat: collapse组件扩充 * fix: 使用header兼容title * fix: collapse参数调整 * fix: 修改collapse的参数 * fix: collapse参数修改 * fix: update tests * fix: schema中去掉function Co-authored-by: hongyang03 <hongyang03@baidu.com>
236 lines
4.6 KiB
Markdown
236 lines
4.6 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"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## 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` |
|
|
|
|
## Collapse 属性表
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
| - | - | - | - |
|
|
| type | `string` | `"collapse"` | 指定为 collapse 渲染器 |
|
|
| disabled | `boolean` | `false` | 禁用 |
|
|
| collapsed | `boolean` | `true` | 初始状态是否折叠 |
|
|
| key | `string \| number` | - | 标识 |
|
|
| header | `string \| SchemaNode` | - | 标题 |
|
|
| body | `string \| SchemaNode` | - | 内容 |
|
|
| showArrow | `boolean` | `true` | 是否展示图标 |
|
|
|