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 環形進度條
