11---
22title : " ion-accordion"
33---
4- import Props from '@ionic-internal/component-api /v7 /accordion/props.md';
5- import Events from '@ionic-internal/component-api /v7 /accordion/events.md';
6- import Methods from '@ionic-internal/component-api /v7 /accordion/methods.md';
7- import Parts from '@ionic-internal/component-api /v7 /accordion/parts.md';
8- import CustomProps from '@ionic-internal/component-api /v7 /accordion/custom-props.md';
9- import Slots from '@ionic-internal/component-api /v7 /accordion/slots.md';
4+ import Props from '@ionic-internal/component-api /v8 /accordion/props.md';
5+ import Events from '@ionic-internal/component-api /v8 /accordion/events.md';
6+ import Methods from '@ionic-internal/component-api /v8 /accordion/methods.md';
7+ import Parts from '@ionic-internal/component-api /v8 /accordion/parts.md';
8+ import CustomProps from '@ionic-internal/component-api /v8 /accordion/custom-props.md';
9+ import Slots from '@ionic-internal/component-api /v8 /accordion/slots.md';
1010
1111<head >
1212 <title >ion-accordion: Accordion Components: How to Build & Examples </title >
@@ -22,31 +22,37 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
2222
2323## 基本的な使い方
2424
25- import Basic from '@site/static /usage/v7 /accordion/basic/index.md';
25+ import Basic from '@site/static /usage/v8 /accordion/basic/index.md';
2626
2727<Basic />
2828
2929## アコーディオンをトグルする方法
3030
3131どのアコーディオンを開くかは、` ion-accordion-group ` の ` value ` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
3232
33- import Toggle from '@site/static /usage/v7 /accordion/toggle/index.md';
33+ import Toggle from '@site/static /usage/v8 /accordion/toggle/index.md';
3434
3535<Toggle />
3636
3737## アコーディオンの状態変化を監視
3838
39- 開発者は ` ionChange ` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
39+ ::: caution
40+ [ Input] ( ./input ) や [ Textarea] ( ./textarea ) などの他のコンポーネントが発する ` ionChange ` イベントのほとんどはバブル化されます。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの ` ionChange ` リスナーを発火させます。
4041
41- import ListenChanges from '@site/static /usage/v7/accordion/listen-changes/index.md';
42+ アコーディオンの内部で ` ionChange ` を発する他のコンポーネントを使用する場合は、アコーディオングループの ` ionChange ` コールバックに、コールバックに渡されたイベントの ` target ` キーをチェックさせ、` ionChange ` がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
43+ :::
44+
45+ 開発者は ` ionChange ` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。
46+
47+ import ListenChanges from '@site/static /usage/v8/accordion/listen-changes/index.md';
4248
4349<ListenChanges />
4450
4551## 複数のアコーディオン
4652
4753開発者は ` multiple ` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
4854
49- import Multiple from '@site/static /usage/v7 /accordion/multiple/index.md';
55+ import Multiple from '@site/static /usage/v8 /accordion/multiple/index.md';
5056
5157<Multiple />
5258
@@ -56,15 +62,15 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
5662
5763個々のアコーディオンは、` ion-accordion ` の ` disabled ` プロパティで無効にできます。
5864
59- import DisableIndividual from '@site/static /usage/v7 /accordion/disable/individual/index.md';
65+ import DisableIndividual from '@site/static /usage/v8 /accordion/disable/individual/index.md';
6066
6167<DisableIndividual />
6268
6369### アコーディオングループ
6470
6571アコーディオングループは、` ion-accordion-group ` の ` disabled ` プロパティで無効にすることができます。
6672
67- import DisableGroup from '@site/static /usage/v7 /accordion/disable/group/index.md';
73+ import DisableGroup from '@site/static /usage/v8 /accordion/disable/group/index.md';
6874
6975<DisableGroup />
7076
@@ -74,15 +80,15 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md
7480
7581個々のアコーディオンは、` ion-accordion ` の ` readonly ` プロパティで無効にできます。
7682
77- import ReadonlyIndividual from '@site/static /usage/v7 /accordion/readonly/individual/index.md';
83+ import ReadonlyIndividual from '@site/static /usage/v8 /accordion/readonly/individual/index.md';
7884
7985<ReadonlyIndividual />
8086
8187### アコーディオングループ
8288
8389アコーディオングループは、` ion-accordion-group ` の ` readonly ` プロパティで無効にできます。
8490
85- import ReadonlyGroup from '@site/static /usage/v7 /accordion/readonly/group/index.md';
91+ import ReadonlyGroup from '@site/static /usage/v8 /accordion/readonly/group/index.md';
8692
8793<ReadonlyGroup />
8894
@@ -106,7 +112,7 @@ import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.
106112
107113` expand="inset" ` の場合、アコーディオングループにはborder radiusが与えられます。 ` md ` モードでは、アコーディオン全体を開くと下に移動します。
108114
109- import ExpansionStyles from '@site/static /usage/v7 /accordion/customization/expansion-styles/index.md';
115+ import ExpansionStyles from '@site/static /usage/v8 /accordion/customization/expansion-styles/index.md';
110116
111117<ExpansionStyles />
112118
@@ -130,7 +136,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
130136}
131137```
132138
133- import AdvancedExpansionStyles from '@site/static /usage/v7 /accordion/customization/advanced-expansion-styles/index.md';
139+ import AdvancedExpansionStyles from '@site/static /usage/v8 /accordion/customization/advanced-expansion-styles/index.md';
134140
135141<AdvancedExpansionStyles />
136142
@@ -142,15 +148,15 @@ import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customizati
142148
143149どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
144150
145- import Icons from '@site/static /usage/v7 /accordion/customization/icons/index.md';
151+ import Icons from '@site/static /usage/v8 /accordion/customization/icons/index.md';
146152
147153<Icons />
148154
149155### テーマ
150156
151157` ion-accordion ` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの ` ion-item ` をターゲットにすることで行うことができます。 ` ion-item ` を使用しているので、 [ ion-item CSS Variables] ( ./item#css-custom-properties ) と [ ion-item Shadow Parts] ( ./item#css-shadow-parts ) にもすべてアクセスすることができます。コンテンツのテイムも、` content ` slotにある要素をターゲットにすることで簡単に実現できます。
152158
153- import Theming from '@site/static /usage/v7 /accordion/customization/theming/index.md';
159+ import Theming from '@site/static /usage/v8 /accordion/customization/theming/index.md';
154160
155161<Theming />
156162
@@ -160,7 +166,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index
160166
161167デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは ` prefers-reduced-motion ` メディアクエリがサポートされ、` reduce ` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで ` animated ` を設定することで、アニメーションを無効にすることができます。
162168
163- import AccessibilityAnimations from '@site/static /usage/v7 /accordion/accessibility/animations/index.md';
169+ import AccessibilityAnimations from '@site/static /usage/v8 /accordion/accessibility/animations/index.md';
164170
165171<AccessibilityAnimations />
166172
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4&size=40){kind=avatar}
0 commit comments