Collapse 折叠面板
折叠面板组件用于将复杂的内容区域进行分组和隐藏，以保持页面的整洁。
请注意，折叠面板组件本身不包含任何样式，你需要自行添加样式，或者与其他组件一起使用。
按需导入组件：
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
按需导入组件的 TypeScript 类型：
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
使用示例：
first content
second content
<mdui-collapse>
<mdui-collapse-item header="first header">first content</mdui-collapse-item>
<mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>
通过 <mdui-collapse-item> 组件的 header 属性可以设置面板头部的文本，也可以通过 header slot 来指定面板头部元素。组件的 default slot 用于面板内容。
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
源码
在 <mdui-collapse> 组件上添加 accordion 属性可以启用手风琴模式，这样一次只会有一个面板处于打开状态。
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
源码
通过 <mdui-collapse> 组件的 value 属性，你可以获取当前打开的面板，或设置需要打开的面板。
在手风琴模式下，value 属性的值为字符串，你可以使用 HTML 属性或 JavaScript 属性来操作该属性；在非手风琴模式下，value 属性的值为数组，此时只能通过 JavaScript 属性进行操作。
手风琴模式
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
非手风琴模式
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>手风琴模式</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>非手风琴模式</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["item-1", "item-2"];
</script>
源码
通过在 <mdui-collapse> 组件上添加 disabled 属性，可以禁用整个折叠面板组。同样，通过在 <mdui-collapse-item> 组件上添加 disabled 属性，可以禁用特定的折叠面板。
全部禁用
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
禁用第一个面板
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>全部禁用</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>禁用第一个面板</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
源码
默认情况下，点击整个面板头部区域会触发折叠。你可以通过设置 <mdui-collapse-item> 组件的 trigger 属性来指定触发折叠的元素。trigger 属性可以是 CSS 选择器或 DOM 元素。
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Item 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
源码| 名称 |
|---|
| 默认 |
折叠面板项的正文内容
|
折叠面板项的头部内容
|
| 名称 |
|---|
折叠面板的头部内容
|
body |
折叠面板的正文内容
|
| HTML 属性 | JavaScript 属性 | Reflect | 类型 | 默认值 |
|---|
accordion | accordion | | boolean | false |
是否启用手风琴模式
|
value | value | | string | string[] | - |
当前展开的 <mdui-collapse-item> 的值
Note：该属性的 HTML 属性始终为字符串，只有在 accordion 为 true 时，才能设置初始值；该属性的 JavaScript 属性值在 accordion 为 true 时为字符串，在 accordion 为 false 时为字符串数组。因此，当 accordion 为 false 时，只能通过修改 JavaScript 属性值来改变此值。
|
disabled | disabled | | boolean | false |
是否禁用此折叠面板
|
| 名称 |
|---|
| 默认 |
<mdui-collapse-item> 组件
|
上一章
CircularProgress 圆形进度指示器