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 slotは、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは ion-item を使用することをお勧めします。
header slotに ion-item を使用する場合、 ion-item の button プロパティは true に、 detail プロパティは false に設定されます。さらに、ion-item にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 アイコンのカスタマイズ を参照してください。
コンテンツ
content slotは、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1ページに1つだけ ion-content インスタンスを追加する必要があるため、ここには他の ion-content インスタンスを除いて何でも置くことができます。
カスタマイズ
拡張スタイル
組み込みの拡張スタイルには、compact と inset の 2 種類があります。この拡張スタイルは ion-accordion-group の expand プロパティによって設定されます。
expand="inset" の場合、アコーディオングループにはborder radiusが与えられます。 md モードでは、アコーディオン全体を開くと下に移動します。
高度な拡張スタイル
アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 ion-accordion には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
| Class Name | Description |
|---|---|
.accordion-expanding | アコーディオンがアクティブに展開しているときに適用されます。 |
.accordion-expanded | アコーディオンが完全に展開されたときに適用されます。 |
.accordion-collapsing | アコーディオンがアクティブに折りたたまれているときに適用されます。 |
.accordion-collapsed | アコーディオンが完全に折りたたまれているときに適用されます。 |
アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに header slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
ion-accordion.accordion-expanding ion-item[slot="header"],
ion-accordion.accordion-expanded ion-item[slot="header"] {
--color: red;
}
アイコン
header slot に ion-item を使用する場合、自動的に ion-icon が追加されます。使用するアイコンの種類は toggleIcon プロパティで制御でき、追加するスロットも toggleIconSlot プロパティで制御することができます。
アイコンを自分で管理したい場合や、ion-icon 以外のアイコンを使用したい場合は、icon 要素に ion-accordion-toggle-icon クラスを追加することができます。
どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
テーマ
ion-accordion はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの ion-item をターゲットにすることで行うことができます。 ion-item を使用しているので、 ion-item CSS Variables と ion-item Shadow Parts にもすべてアクセスすることができます。コンテンツのテイムも、content slotにある要素をターゲットにすることで簡単に実現できます。
アクセシビリティ
アニメーション
デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは prefers-reduced-motion メディアクエリがサポートされ、reduce に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで animated を設定することで、アニメーションを無効にすることができます。
キーボードナビゲーション
ion-accordion-group の中で使用する場合、ion-accordion はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。
| Key | Function |
|---|---|
Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header. - When focus is on the last accordion header, moves focus to the first accordion header. |
Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header. - When focus is on the first accordion header, moves focus to the last accordion header. |
Home | When focus is on an accordion header, moves focus to the first accordion header. |
End | When focus is on an accordion header, moves focus to the last accordion header. |
パフォーマンス
アニメーション
アコーディオンアニメーションは、アニメーションを開始するときに content slotの高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。
例えば、ion-img を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 ion-img が画像データをロードし、ロードされた画像データを考慮して ion-img の寸法が変更されることになります。その結果、 content slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
遅延読み込みを行わない
img要素を使用します。ion-imgは常に遅延読み込みを使用しますが、imgはデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。ion-imgに最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用してion-imgに最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、img要素をloading="lazy"と共に使用する場合にも有効です!これらの解決方法を選択できない場合、開発者は ion-accordion-group の
animatedプロパティを使用してアニメーションを完全に無効にすることを検討することができます。
プロパティ
disabled
| Description | trueの場合、アコーディオンは対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
readonly
| Description | trueの場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。 |
| Attribute | readonly |
| Type | boolean |
| Default | false |
toggleIcon
| Description | 使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。 |
| Attribute | toggle-icon |
| Type | string |
| Default | chevronDown |
toggleIconSlot
| Description | トグルアイコンを配置する ion-item の内側のスロット。デフォルトは "end" です。 |
| Attribute | toggle-icon-slot |
| Type | "end" ｜ "start" |
| Default | 'end' |
value
| Description | アコーディオンの値です。デフォルトは自動生成された値です。 |
| Attribute | value |
| Type | string |
| Default | ion-accordion-${accordionIds++} |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
content | content slotのラッパー要素。 |
expanded | 拡張された要素です。ヘッダとコンテンツの部分と組み合わせて使用することができます（例：::part(header expanded)）。 |
header | header slotのラッパーの要素です。 |
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
content | コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。 |
header | コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。 |