Collapse 折叠器

基本用法

```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” } ] }

  2. ## 手风琴模式
  4. ```schema: scope="body"
  5. {
  6.     "type": "collapse-group",
  7.     "activeKey": ["1"],
  8.     "accordion": true,
  9.     "body": [
  10.       {
  11.         "type": "collapse",
  12.         "key": "1",
  13.         "header": "标题1",
  14.         "body": "这里是内容1"
  15.       },
  16.       {
  17.         "type": "collapse",
  18.         "key": "2",
  19.         "header": "标题2",
  20.         "body": "这里是内容2"
  21.       },
  22.       {
  23.         "type": "collapse",
  24.         "key": "3",
  25.         "header": "标题3",
  26.         "body": "这里是内容3"
  27.       }
  28.     ]
  29. }

自定义图标

```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” } ] }

  2. ## 设置图标位置
  4. ```schema: scope="body"
  5. {
  6.     "type": "collapse-group",
  7.     "expandIconPosition": "right",
  8.     "activeKey": ["1"],
  9.     "body": [
  10.       {
  11.         "type": "collapse",
  12.         "key": "1",
  13.         "header": "标题1",
  14.         "body": "这里是内容1"
  15.       },
  16.       {
  17.         "type": "collapse",
  18.         "key": "2",
  19.         "header": "标题2",
  20.         "body": "这里是内容2"
  21.       },
  22.       {
  23.         "type": "collapse",
  24.         "key": "3",
  25.         "header": "标题3",
  26.         "body": "这里是内容3"
  27.       }
  28.     ]
  29. }

面板嵌套

```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” } ] }

  2. ## 折叠面板禁用
  4. ```schema: scope="body"
  5. {
  6.     "type": "collapse-group",
  7.     "activeKey": ["1"],
  8.     "body": [
  9.       {
  10.         "type": "collapse",
  11.         "key": "1",
  12.         "header": "标题1",
  13.         "body": "这里是内容1"
  14.       },
  15.       {
  16.         "type": "collapse",
  17.         "disabled": true,
  18.         "key": "2",
  19.         "header": "标题2",
  20.         "body": "这里是内容2"
  21.       }
  22.     ]
  23. }

折叠面板图标隐藏

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 是否展示图标