アコーディオンとタブの追加

概要

サイトにコンポジットを追加します。

アコーディオンとタブは、カルーセル、反転、スニペットと同様に、コンポジット レンダリングです。コンポジット レンダリングを使用すると、他のレンダリングからより複雑なレンダリングを作成できます。

アコーディオン レンダリングでは、折りたたみ可能なセクションのリストを垂直または水平にスタックできます。アコーディオンを使用して、FAQ、サムネイルのセットを表示したり、長いドキュメントをセクションに分割したりできます。各セクションを展開して、そのアイテムに関連付けられているコンテンツを表示できます。

アコーディオンでページを折りたたむとスクロールが最小限に抑えられます。これは、コンテンツが豊富なページや、コンテンツが非常に小さなスペースに制限されているページ (モバイル デバイスなど) で非常に役立ちます。これにより、人々は何を読むか、何を無視するかを決めることができ、Web ページの表示の圧迫感を抑えることができます。

アコーディオン レンダリングを追加するには、次の手順に従います。

  1. ページにアコーディング レンダリングをドラッグ アンド ドロップします。

  2. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、次の手順に従います。

    • 既存のコンテンツ アイテムを選択するには、[既存のコンテンツを選択] をクリックし、目的のコンテンツ アイテムをクリックして、[OK] をクリックします。

      たとえば、既存の FAQ セクションを選択すると、FAQ コンテンツ アイテムによって以下のようにアコーディオンが自動的に入力されます。

      [関連付けられたコンテンツを選択してください。] ダイアログ ボックスを選択します。
      アコーディオンの例。
    • 新しいアコーディオン コンテンツを作成するには、[新しいコンテンツを作成] をクリックし、[OK] をクリックします。次に、[アイテムを挿入] ダイアログ ボックスで、[アコーディオン] をクリックします。名前を入力して [OK] をクリックします。

  3. ツールバーのボタンを使用して、アコーディオン アイテムを追加したり、その順序を変更したりできます。

ページ上でのアコーディオンの表示方法を変更できます。

アコーディオンのアピアランスを変更するには、次の手順に従います。

  1. アコーディオンのフローティング ツールバーで、[コンポーネント プロパティを編集] をクリックします。

  2. [アコーディオンのコントロール] セクションで、次のフィールドを編集してアコーディオンのアピアランスを決定します。

    • [緩和機能] – 展開/折りたたみアニメーションのタイプをクリックします。これには、[スイング]、[バック]、[バウンス]、[クイント] などがあります。

    • [アニメーション速度] – アニメーションの速度 (ミリ秒単位) を指定します。たとえば、低速には 600、通常の場合は 400、高速には 200 とそれぞれ入力します。

    • [複数を開くことが可能] – 複数のセクションを同時に展開できるようにする場合に選択します。

    • [切り替え可能] – セクションの切り替えを許可する場合に選択します。

    • [既定で展開済み] – ページを開いたときに最初のセクションが展開済みで表示されるようにする場合に選択します。

    • [ホバー時に展開] – セクションのタイトルの上にマウスを置いたときにセクションを展開するには、これを選択します。

  3. [コントロールのプロパティ] ダイアログ ボックスの [スタイル] セクションでは、アコーディオンのさまざまなスタイルを選択できます。たとえば、アコーディオンを水平に表示するには、[横型アコーディオン] を選択します。

    [スタイル] セクションで、[横型アコーディオン] を選択します。