ion-accordion
アコーディオンは、コンテンツ内の折りたたみ可能なセクションを提供し、情報を整理およびグループ化する方法を提供しながら、垂直方向のスペースを削減します。すべての ion-accordion コンポーネントは、ion-accordion-group コンポーネント内でグループ化する必要があります。
基本的な使用法
アコーディオンの切り替え
どのアコーディオンが開いているかは、ion-accordion-group の value プロパティを設定することで制御されます。このプロパティを設定することで、開発者は特定のアコーディオンをプログラムで展開または折りたたむことができます。
アコーディオンの状態変化のリスニング
Input や Textarea などの他のコンポーネントによって発行されるほとんどの ionChange イベントはバブルします。その結果、これらのイベントはバブルアップし、関連するコンポーネントがアコーディオン内で使用されている場合、アコーディオン グループの ionChange リスナーが発火します。
アコーディオン内で ionChange を発行する他のコンポーネントを使用する場合、アコーディオン グループの ionChange コールバックで、コールバックに渡されたイベントの target キーをチェックして、ionChange がアコーディオン グループから発生しているのか、子孫から発生しているのかを確認することをお勧めします。
開発者は、アコーディオンが展開または折りたたまれたときに通知されるように、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 のインスタンスは 1 つのみであるため、別の ion-content インスタンスを除き、ここに何でも配置できます。
カスタマイズ
展開スタイル
compact と inset の 2 つの組み込み展開スタイルがあります。この展開スタイルは、ion-accordion-group の expand プロパティを介して設定されます。
expand="inset" の場合、アコーディオン グループには境界半径が設定されます。md モードでは、開くとアコーディオン全体が下にシフトします。
高度な展開スタイル
アコーディオンの状態に基づいてスタイルを設定することで、展開動作をカスタマイズできます。ion-accordion には 4 つの状態クラスが適用されます。これらのクラスを使用してスタイルを設定すると、高度な状態遷移を作成できます
| クラス名 | 説明 |
|---|---|
.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 はコンポーネントを操作するための完全なキーボードサポートを備えています。次の表は、各キーの動作を詳しく示しています。
| キー | 説明 |
|---|---|
| Space または 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 |
| タイプ | "ios" ｜ "md" |
| デフォルト | undefined |
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 | コンテンツスロットのラッパー要素。 |
expanded | 展開された要素。header および content パーツと組み合わせて使用できます（例：::part(header expanded)）。 |
header | ヘッダースロットのラッパー要素。 |
CSSカスタムプロパティ
このコンポーネントで利用可能な CSS カスタムプロパティはありません。
スロット
| 名前 | 説明 |
|---|---|
content | コンテンツはヘッダーの下に配置され、展開状態に基づいて表示または非表示になります。 |
header | コンテンツは上部に配置され、アコーディオンアイテムを展開または折りたたむために使用されます。 |