アコーディオンコンポーネント

コアコンポーネントのアコーディオンコンポーネントを使用すると、アコーディオン形式で配置された一連のパネルをページ上に作成できます。

使用方法

コアコンポーネントのアコーディオンコンポーネントを使用すると、アコーディオン形式で配置された一連のパネルコンポーネントをページ上に作成できます。タブコンポーネントと似ていますが、パネルの展開と折りたたみが可能です。

パネルへのディープリンク

アコーディオンとタブコンポーネントは、コンポーネント内のパネルに直接リンクする機能をサポートしています。

次の手順を実行します。

  1. ページエディターで「公開されているとおりに表示」オプションを使用して、ページとコンポーネントを表示します。
  2. ページのコンテンツを調べ、パネルの ID を特定します。
    • 例:id="accordion-86196c94d3-item-ca319dbb0b"
  3. ID がアンカーになり、ハッシュ(#)を使用して URL に追加できます。
    • 例:https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

パネル ID をアンカーとして使用して指定した URL に移動すると、ブラウザーは特定のコンポーネントまで直接スクロールし、指定したパネルを表示します。デフォルトでパネルが展開されないように設定されている場合は、自動的に展開されます。

バージョンと互換性

このドキュメントでは、アコーディオンコンポーネントの現在のバージョン(2019 年 6 月にコアコンポーネントのリリース 2.5.0 で導入された v1)について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 互換性あり 互換性あり 互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル

アコーディオンコンポーネントを体験したり、その設定オプションの例や、HTML 出力や JSON 出力の例を確認したりするには、コンポーネントライブラリを参照してください。

技術的詳細

アコーディオンコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ

設定ダイアログでは、アコーディオンアイテム、アコーディオンアイテムのパネル、ページの訪問者に対するアコーディオンアイテムの動作および表示をコンテンツ作成者が定義できます。

「項目」タブ

アコーディオンコンポーネントの編集ダイアログの「項目」タブ

パネルとして追加するコンポーネントを選択するためのコンポーネントセレクターを開くには、「追加」ボタンを使用します。追加が完了すると、以下の列を含むエントリがリストに追加されます。

  • アイコン - パネルのコンポーネントタイプのアイコン(リスト内で識別しやすくするために使用)。マウスポインターを置くと、完全なコンポーネント名がツールチップとして表示されます。
  • 説明 - パネルのテキストとして使用される説明文。デフォルトでは、パネル用に選択されたコンポーネントの名前に設定されます。
  • 削除 - タップまたはクリックすると、アコーディオンコンポーネントからパネルを削除できます。
  • 並べ替え - タップまたはクリックしてドラッグすると、パネルを並べ替えることができます。
ヒント

ページのビューポートが縮小されて編集ダイアログがフルスクリーンになる場合、「追加」ボタンが非表示になります。コンポーネントブラウザーからページエディターのアコーディオンコンポーネントにドラッグ&ドロップすることで、コンポーネントをアコーディオンコンポーネントに追加できます。

「プロパティ」タブ

アコーディオンコンポーネントの編集ダイアログの「プロパティ」タブ

  • 単一アイテムの展開 - このオプションを選択すると、1 つのアコーディオンアイテムが一度に強制的に展開されます。1 つのアイテムを展開すると、それ以外のアイテムはすべて折りたたまれます。
  • 展開済みのアイテム - ページの読み込み時にデフォルトで展開されるアイテムを定義します。
    • 単一アイテムの展開」が選択されている場合は、1 つのパネルを選択する必要があります。デフォルトでは、最初のパネルが選択されます。
    • 単一アイテムの展開」が選択されていない場合、このオプションは複数選択可能となり、任意指定となります。
  • ID - このオプションを使用すると、HTML 内および データレイヤー内のコンポーネントの一意の識別子を制御できます。
    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「パネルを選択」ポップオーバー

コンポーネントツールバーの​パネルを選択​オプションを使用すれば、コンテンツ作成者は編集用に別のパネルに切り替えたり、アコーディオン内のパネルを簡単に並べ替えたりできます。

「パネルを選択」アイコン

コンポーネントツールバーの​パネルを選択​オプションを選択すると、設定済みのアコーディオンパネルがドロップダウンとして表示されます。

「パネルを選択」ポップオーバー

  • リスト内のパネルは割り当てられた順番で並べられ、その順番が通し番号に反映されます。
  • まずパネルのコンポーネントタイプが表示され、次にパネルドの説明が薄いフォントで表示されます。
  • ドロップダウン内の 1 つのエントリをタップまたはクリックすると、エディターのビューがそのパネルに切り替わります。
  • ドラッグハンドルを使用すれば、パネルをインプレースで並べ替えることができます。

デザインダイアログ

デザインダイアログでは、アコーディオンコンポーネントの使用時にコンテンツ作成者に提供されるオプションと、アコーディオンコンポーネントの配置時のデフォルト設定をテンプレート作成者が定義できます。

「プロパティ」タブ

デザインダイアログの「プロパティ」タブ

  • 許可される見出し要素 - 作成者が選択できるアコーディオンアイテム見出し HTML 要素を定義する複数選択ドロップダウンです。
  • デフォルトの見出し要素 - デフォルトのアコーディオンアイテム見出し HTML 要素を定義します。

「許可されるコンポーネント」タブ

許可されるコンポーネント」タブでは、コンテンツ作成者がアコーディオンコンポーネント内のパネルにアイテムとして追加できるコンポーネントを定義できます。

「許可されるコンポーネント」タブは、テンプレートエディターでレイアウトコンテナのポリシーやプロパティを定義する際の同じ名前のタブと同じように機能します。

「スタイル」タブ

アコーディオンコンポーネントは、AEM スタイルシステムをサポートしています。

このページ