ion-accordion
手風琴在您的內容中提供可摺疊的區段，以減少垂直空間，同時提供組織和分組資訊的方法。所有 ion-accordion 組件都應分組在 ion-accordion-group 組件內。
基本用法
切換手風琴
哪個手風琴是打開的，是由設定 ion-accordion-group 上的 value 屬性來控制。設定此屬性可讓開發人員以程式方式展開或摺疊特定手風琴。
監聽手風琴狀態變更
開發人員可以監聽 ionChange 事件，以在手風琴展開或摺疊時收到通知。
主控台從上面的範例記錄時，主控台訊息將會顯示在這裡。多個手風琴
開發人員可以使用 multiple 屬性，允許同時開啟多個手風琴。
停用手風琴
個別手風琴
可以使用 ion-accordion 上的 disabled 屬性停用個別手風琴。
手風琴群組
可以使用 ion-accordion-group 上的 disabled 屬性停用手風琴群組。
唯讀手風琴
個別手風琴
可以使用 ion-accordion 上的 readonly 屬性停用個別手風琴。
手風琴群組
可以使用 ion-accordion-group 上的 readonly 屬性停用手風琴群組。
結構
標頭
header 插槽用作將展開或摺疊手風琴的切換。我們建議您在這裡使用 ion-item 以利用輔助功能和主題功能。
在 header 插槽中使用 ion-item 時，ion-item 的 button 屬性會設定為 true，且 detail 屬性會設定為 false。此外，我們也會自動將切換圖示新增至 ion-item。當您展開或摺疊手風琴時，此圖示會自動旋轉。如需詳細資訊，請參閱自訂圖示。
內容
content 插槽用作手風琴的一部分，該部分會根據您的手風琴狀態顯示或隱藏。您可以將任何內容放在此處，除了另一個 ion-content 實例，因為每個頁面只能新增一個 ion-content 實例。
自訂
展開樣式
有兩種內建展開樣式：compact 和 inset。此展開樣式是透過 ion-accordion-group 上的 expand 屬性來設定。
當 expand="inset" 時，手風琴群組會被賦予一個邊框半徑。在 md 模式下，整個手風琴將在打開時向下移動。
進階展開樣式
您可以透過根據手風琴的狀態設定樣式來自訂展開行為。有四個狀態類別應用於 ion-accordion。使用這些類別設定樣式可讓您建立進階狀態轉換
| 類別名稱 | 描述 |
|---|---|
.accordion-expanding | 當手風琴正在主動展開時套用 |
.accordion-expanded | 當手風琴完全展開時套用 |
.accordion-collapsing | 當手風琴正在主動摺疊時套用 |
.accordion-collapsed | 當手風琴完全摺疊時套用 |
如果您需要以手風琴的特定部分為目標，我們建議直接以元素為目標。例如，如果您想要在手風琴展開時自訂標頭插槽中的 ion-item，您可以使用下列選取器
ion-accordion.accordion-expanding ion-item[slot="header"],
ion-accordion.accordion-expanded ion-item[slot="header"] {
--color: red;
}
圖示
在 header 插槽中使用 ion-item 時，我們會自動新增 ion-icon。使用的圖示類型可以使用 toggleIcon 屬性控制，而新增到的插槽可以使用 toggleIconSlot 屬性控制。
如果您想要自行管理圖示或使用非 ion-icon 的圖示，您可以將 ion-accordion-toggle-icon 類別新增至圖示元素。
無論您選擇哪個選項，當您展開或摺疊手風琴時，圖示都會自動旋轉。
主題設定
由於 ion-accordion 充當標頭和內容元素的殼層，因此您可以輕鬆地以您想要的任何方式為手風琴設定主題。您可以透過以帶有插槽的 ion-item 為目標來設定標頭的主題。由於您使用 ion-item，因此您也可以存取所有 ion-item CSS 變數和 ion-item 陰影部分。也可以透過以 content 插槽中的元素為目標來輕鬆實現內容的主題設定。
輔助功能
動畫
預設情況下，展開或摺疊手風琴項目時會啟用動畫效果。當支援 prefers-reduced-motion 媒體查詢且設定為 reduce 時，動畫效果將會自動停用。對於不支援此功能的瀏覽器，您可以在 Ionic Framework 應用程式中設定 animated 設定來停用動畫。
鍵盤互動
當在 ion-accordion-group 內使用時，ion-accordion 具有完整的鍵盤支援來與元件互動。下表詳細說明了每個按鍵的功能
| 按鍵 | 描述 |
|---|---|
| 空白鍵 或 Enter 鍵 | 當焦點位於手風琴標題上時，手風琴會根據元件的狀態摺疊或展開。 |
| Tab 鍵 | 將焦點移動到下一個可聚焦的元素。 |
| Shift + Tab 鍵 | 將焦點移動到上一個可聚焦的元素。 |
| 向下箭頭鍵 | - 當焦點位於手風琴標題上時，將焦點移動到下一個手風琴標題。 - 當焦點位於最後一個手風琴標題上時，將焦點移動到第一個手風琴標題。 |
| 向上箭頭鍵 | - 當焦點位於手風琴標題上時，將焦點移動到上一個手風琴標題。 - 當焦點位於第一個手風琴標題上時，將焦點移動到最後一個手風琴標題。 |
| Home 鍵 | 當焦點位於手風琴標題上時，將焦點移動到第一個手風琴標題。 |
| End 鍵 | 當焦點位於手風琴標題上時，將焦點移動到最後一個手風琴標題。 |
效能
動畫
手風琴動畫的工作原理是了解動畫開始時 content 插槽的高度。手風琴預期此高度在整個動畫過程中保持一致。因此，開發人員應避免在動畫期間執行任何可能更改內容高度的操作。
例如，使用 ion-img 可能會導致延遲載入影像時出現版面配置位移。這表示當動畫播放時，ion-img 會載入影像資料，並且 ion-img 的尺寸會改變以適應載入的影像資料。這可能會導致 content 插槽的高度發生變化。開發人員有幾種方法可以避免這種情況
-
使用不含延遲載入的
img元素。ion-img始終使用延遲載入，但img預設不使用延遲載入。這是最簡單的選項，如果您有小型影像且從延遲載入中獲益不大，則效果很好。 -
在
ion-img上設定最小寬度和高度。如果您需要使用延遲載入並且事先知道影像的尺寸（例如，如果您載入相同尺寸的圖示），則可以使用 CSS 將ion-img設定為具有最小寬度或高度。這讓開發人員可以利用延遲載入的優勢，同時避免版面配置位移。當使用具有loading="lazy"的img元素時，此方法也有效！ -
如果這些選項都不適用，開發人員可能需要考慮使用 ion-accordion-group 上的
animated屬性來完全停用動畫。
屬性
disabled
| 描述 | 如果為 true，則無法與手風琴互動。 |
| 屬性 | disabled |
| 類型 | boolean |
| 預設 | false |
mode
| 描述 | mode 決定要使用哪個平台樣式。 |
| 屬性 | mode |
| 類型 | "ios" ｜ "md" |
| 預設 | 未定義 |
readonly
| 描述 | 如果為 true，則無法與手風琴互動，但不會改變不透明度。 |
| 屬性 | readonly |
| 類型 | boolean |
| 預設 | false |
toggleIcon
| 描述 | 要使用的切換圖示。當手風琴展開或摺疊時，此圖示將會旋轉。 |
| 屬性 | toggle-icon |
| 類型 | string |
| 預設 | chevronDown |
toggleIconSlot
| 描述 | 放置切換圖示的 ion-item 內的插槽。預設為 "end"。 |
| 屬性 | toggle-icon-slot |
| 類型 | "end" ｜ "start" |
| 預設 | 'end' |
value
| 描述 | 手風琴的值。預設為自動產生的值。 |
| 屬性 | value |
| 類型 | string |
| 預設 | ion-accordion-${accordionIds++} |
事件
此元件沒有可用的事件。
方法
此元件沒有可用的公用方法。
CSS 陰影部分
| 名稱 | 描述 |
|---|---|
content | content 插槽的包裝元素。 |
expanded | 展開的元素。可以與 header 和 content 部分結合使用 (即 ::part(header expanded))。 |
header | header 插槽的包裝元素。 |
CSS 自訂屬性
此元件沒有可用的 CSS 自訂屬性。
插槽
| 名稱 | 描述 |
|---|---|
content | 內容放置在標題下方，並根據展開狀態顯示或隱藏。 |
header | 內容放置在頂部，用於展開或摺疊手風琴項目。 |