ion-accordion
アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての ion-accordion
コンポーネントは ion-accordion-group
コンポーネントの中にグループ化されている必要があります。
基本的な使い方
アコーディオンをトグルする方法
どのアコーディオンを開くかは、ion-accordion-group
の value
プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
アコーディオンの状態変化を監視
Input や Textarea などの他のコンポーネントが発する ionChange
イベントのほとんどはバブル化されます。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの ionChange
リスナーを発火させます。
アコーディオンの内部で ionChange
を発する他のコンポーネントを使用する場合は、アコーディオングループの ionChange
コールバックに、コールバックに渡されたイベントの target
キーをチェックさせ、ionChange
がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
開発者は ionChange
イベント をリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。
Console
Console messages will appear here when logged from the example above.
複数のアコーディオン
開発者は 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 | If true , the accordion cannot be interacted with. |
Attribute | disabled |
Type | boolean |
Default | false |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
readonly
Description | If true , the accordion cannot be interacted with, but does not alter the opacity. |
Attribute | readonly |
Type | boolean |
Default | false |
toggleIcon
Description | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. |
Attribute | toggle-icon |
Type | string |
Default | chevronDown |
toggleIconSlot
Description | The slot inside of ion-item to place the toggle icon. Defaults to "end" . |
Attribute | toggle-icon-slot |
Type | "end" | "start" |
Default | 'end' |
value
Description | The value of the accordion. Defaults to an autogenerated value. |
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 | The wrapper element for the content slot. |
expanded | The expanded element. Can be used in combination with the header and content parts (i.e. ::part(header expanded) ). |
header | The wrapper element for the header slot. |
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
Name | Description |
---|---|
content | Content is placed below the header and is shown or hidden based on expanded state. |
header | Content is placed at the top and is used to expand or collapse the accordion item. |