mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +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>
4.6 KiB
4.6 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Collapse 折叠器 | 0 | ⚙ 组件 | Collapse 折叠器 | 36 |
基本用法
{
"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"
}
]
}
手风琴模式
{
"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"
}
]
}
自定义图标
{
"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"
}
]
}
设置图标位置
{
"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"
}
]
}
面板嵌套
{
"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"
}
]
}
折叠面板禁用
{
"type": "collapse-group",
"activeKey": ["1"],
"body": [
{
"type": "collapse",
"key": "1",
"header": "标题1",
"body": "这里是内容1"
},
{
"type": "collapse",
"disabled": true,
"key": "2",
"header": "标题2",
"body": "这里是内容2"
}
]
}
折叠面板图标隐藏
{
"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 |
是否展示图标 |