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 | Applied when the accordion is actively expanding |
.accordion-expanded | Applied when the accordion is fully expanded |
.accordion-collapsing | Applied when the accordion is actively collapsing |
.accordion-collapsed | Applied when the accordion is fully 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 | コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。 |