ion-accordion

shadow

アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての 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の高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。

1. 遅延読み込みを行わない img 要素を使用します。ion-img は常に遅延読み込みを使用しますが、img はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。

2. ion-img に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して ion-img に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 img 要素を loading="lazy" と共に使用する場合にも有効です!

3. これらの解決方法を選択できない場合、開発者は 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.