Show Menu
TOPICS×

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

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

使用方法

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

バージョンと互換性

このドキュメントでは、アコーディオンコンポーネントの現在のバージョン(2019 年 6 月にコアコンポーネントのリリース 2.5.0 で導入された v1)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.3
AEM 6.4
AEM 6.5
v1
互換性あり
互換性あり
互換性あり
コアコンポーネントのバージョンとリリースについて詳しくは、 コアコンポーネントのバージョン を参照してください。

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

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

技術的詳細

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

設定ダイアログ

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

「項目」タブ

パネルとして追加するコンポーネントを選択するためのコンポーネントセレクターを開くには、「
追加
」ボタンを使用します。追加が完了すると、以下の列を含むエントリがリストに追加されます。
  • アイコン
    - パネルのコンポーネントタイプのアイコン(リスト内で識別しやすくするために使用)。マウスポインターを置くと、完全なコンポーネント名がツールチップとして表示されます。
  • 説明
    - パネルのテキストとして使用される説明文。デフォルトでは、パネル用に選択されたコンポーネントの名前に設定されます。
  • 削除
    - タップまたはクリックすると、アコーディオンコンポーネントからパネルを削除できます。
  • 並べ替え
    - タップまたはクリックしてドラッグすると、パネルを並べ替えることができます。
ページのビューポートが縮小されて編集ダイアログがフルスクリーンになる場合、「
追加
」ボタンが非表示になります。 コンポーネントブラウザーからページエディターのアコーディオンコンポーネントにドラッグ&ドロップ することで、コンポーネントをアコーディオンコンポーネントに追加できます。

「プロパティ」タブ

  • 単一アイテムの展開
    - このオプションを選択すると、1 つのアコーディオンアイテムが一度に強制的に展開されます。1 つのアイテムを展開すると、それ以外のアイテムはすべて折りたたまれます。
  • 展開済みのアイテム
    - ページの読み込み時にデフォルトで展開されるアイテムを定義します。
    • 単一アイテムの展開
      」が選択されている場合は、1 つのパネルを選択する必要があります。デフォルトでは、最初のパネルが選択されます。
    • 単一アイテムの展開
      」が選択されていない場合、このオプションは複数選択可能となり、任意指定となります。

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

コンポーネントツールバーの​
パネルを選択
​オプションを使用すれば、コンテンツ作成者は編集用に別のパネルに切り替えたり、アコーディオン内のパネルを簡単に並べ替えたりできます。
コンポーネントツールバーの​
パネルを選択
​オプションを選択すると、設定済みのアコーディオンパネルがドロップダウンとして表示されます。
  • リスト内のパネルは割り当てられた順番で並べられ、その順番が通し番号に反映されます。
  • まずパネルのコンポーネントタイプが表示され、次にパネルドの説明が薄いフォントで表示されます。
  • ドロップダウン内の 1 つのエントリをタップまたはクリックすると、エディターのビューがそのパネルに切り替わります。
  • ドラッグハンドルを使用すれば、パネルをインプレースで並べ替えることができます。

デザインダイアログ

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

「プロパティ」タブ

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

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

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

「スタイル」タブ

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