アコーディオンコンポーネント accordion-component
コアコンポーネントのアコーディオンコンポーネントを使用すると、アコーディオン形式で配置された一連のパネルをページ上に作成できます。
使用方法 usage
コアコンポーネントのアコーディオンコンポーネントを使用すると、アコーディオン形式で配置された一連のパネルコンポーネントをページ上に作成できます。タブコンポーネントと似ていますが、パネルの展開と折りたたみが可能です。
- アコーディオンのプロパティは、設定ダイアログで定義できます。
- アコーディオンのパネルの順序は、設定ダイアログで定義できます。また、パネルを選択ポップオーバーでも定義できます。
- アコーディオンコンポーネントをページに追加するときのデフォルト設定は、デザインダイアログで定義できます。
バージョンと互換性 version-and-compatibility
このドキュメントでは、アコーディオンコンポーネントの現在のバージョン（2019年6月にコアコンポーネントのリリース 2.5.0 で導入された v1）について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。
コンポーネント出力のサンプル sample-component-output
アコーディオンコンポーネントを体験したり、その設定オプションの例や、HTML 出力や JSON 出力の例を確認したりするには、コンポーネントライブラリを参照してください。
技術的詳細 technical-details
アコーディオンコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
パネルへのディープリンク deep-linking
アコーディオン、カルーセルおよびタブコンポーネントは、コンポーネント内のパネルに直接リンクする機能をサポートしています。
次の手順を実行します。
- ページエディターで「公開されているとおりに表示」オプションを使用して、ページとコンポーネントを表示します。
- ページのコンテンツを調べ、パネルの ID を特定します。
- 例：
id="accordion-86196c94d3-item-ca319dbb0b"
- 例：
- ID がアンカーになり、ハッシュ（
#）を使用して URL に追加できます。- 例：
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b
- 例：
パネル ID をアンカーとして使用して指定した URL に移動すると、ブラウザーは特定のコンポーネントまで直接スクロールし、指定したパネルを表示します。デフォルトでパネルが展開されないように設定されている場合は、自動的に展開されます。
アコーディオンとレスポンシブデザイン responsive-design
すべてのコアコンポーネントは、完全にレスポンシブに動作するように設計されており、デバイス間のシームレスなエクスペリエンスを実現します。
アコーディオンコンポーネントなど、一部の高度なコンポーネントでは、あらゆる状況での応答性を維持するために、実装プロジェクトのコンテキスト内で特別な配慮が必要になる場合があります。詳しくは、コアコンポーネントのレスポンシブデザインを参照してください。
設定ダイアログ configure-dialog
設定ダイアログでは、アコーディオンアイテム、アコーディオンアイテムのパネル、ページの訪問者に対するアコーディオンアイテムの動作および表示をコンテンツ作成者が定義できます。
「項目」タブ items-tab
パネルとして追加するコンポーネントを選択するためのコンポーネントセレクターを開くには、「追加」ボタンを使用します。追加が完了すると、以下の列を含むエントリがリストに追加されます。
- アイコン - パネルのコンポーネントタイプのアイコン（リスト内で識別しやすくするために使用）。マウスポインターを置くと、完全なコンポーネント名がツールチップとして表示されます。
- 説明 - パネルのテキストとして使用される説明文。デフォルトでは、パネル用に選択されたコンポーネントの名前に設定されます。
- 削除 - タップまたはクリックすると、アコーディオンコンポーネントからパネルを削除できます。
- 並べ替え - タップまたはクリックしてドラッグすると、パネルを並べ替えることができます。
「プロパティ」タブ properties-tab
-
単一アイテムの展開 - このオプションを選択すると、1 つのアコーディオンアイテムが一度に強制的に展開されます。1 つのアイテムを展開すると、それ以外のアイテムはすべて折りたたまれます。
-
展開済みのアイテム - ページの読み込み時にデフォルトで展開されるアイテムを定義します。
- 「単一アイテムの展開」が選択されている場合は、1 つのパネルを選択する必要があります。デフォルトでは、最初のパネルが選択されます。
- 「単一アイテムの展開」が選択されていない場合、このオプションは複数選択可能となり、任意指定となります。
-
ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
- 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。
「パネルを選択」ポップオーバー select-panel-popover
コンテンツ作成者は、コンポーネントツールバーの パネルを選択 オプションを使用して、編集用に別のパネルに切り替えたり、アコーディオン内のパネルを簡単に並べ替えたりできます。
コンポーネントツールバーの パネルを選択 オプションを選択すると、設定済みのアコーディオンパネルがドロップダウンとして表示されます。
- リスト内のパネルは割り当てられた順番で並べられ、その順番が通し番号に反映されます。
- まずパネルのコンポーネントタイプ、次にパネルの説明が薄いフォントで表示されます。
- ドロップダウン内の 1 つのエントリをタップまたはクリックすると、エディターのビューがそのパネルに切り替わります。
- ドラッグハンドルを使用すれば、パネルをインプレースで並べ替えることができます。
デザインダイアログ design-dialog
デザインダイアログでは、アコーディオンコンポーネントの使用時にコンテンツ作成者に提供されるオプションと、アコーディオンコンポーネントの配置時のデフォルト設定をテンプレート作成者が定義できます。
「プロパティ」タブ properties-tab-design
- 許可される見出し要素 - 作成者が選択できるアコーディオンアイテム見出し HTML 要素を定義する複数選択ドロップダウンです。
- デフォルトの見出し要素 - デフォルトのアコーディオンアイテム見出し HTML 要素を定義します。
「許可されるコンポーネント」タブ allowed-components-tab
「許可されるコンポーネント」タブでは、アコーディオンコンポーネント内のパネルにアイテムとして追加できるコンポーネントをコンテンツ作成者が定義できます。
「許可されるコンポーネント」タブは、テンプレートエディターでレイアウトコンテナのポリシーやプロパティを定義する際の同じ名前のタブと同じように機能します。
「スタイル」タブ styles-tab
アコーディオンコンポーネントでは、AEM スタイルシステムをサポートしています。
Adobe Client Data Layer data-layer
アコーディオンコンポーネントは、Adobe Client Data Layer をサポートしています。