1. 複合 材料

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

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

アコーディオンレンダリングを追加する

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

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

アコーディオンレンダリングを追加するには:

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

  2. Select the Associated Contentダイアログボックスで、次の操作を行います。

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

      たとえば、既存のFAQセクションを選択すると、FAQコンテンツ項目がアコーディオンに自動的に入力されます。

      Select the Associated Content dialog box.
      Accordion example.

    • 新しいアコーディオンコンテンツを作成するには、「 Create New Content 」をクリックして「 Ok 」をクリックし、Insert Itemダイアログボックスで「 Accordion」をクリックします。名前を入力してOkをクリックします。

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

アコーディオンの外観を変更する

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

アコーディオンの外観を変更するには:

  1. アコーディオンのフローティングツールバーで、「 Edit the Component Properties」をクリックします。

  2. 「 Accordion Control 」セクションで、次のフィールドを編集してアコーディオンの外観を決定します。

    • Easing Function –展開/折りたたみアニメーションのタイプをクリックします。たとえば、swing、back、bounce、quintです。

    • Animation Speed – アニメーションの速度 (ミリ秒単位) を指定します。たとえば、低速の場合は600 、標準の場合は400 、高速の場合は200を入力します。

    • Can Open Multiple – 選択すると、複数のセクションを同時に展開できます。

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

    • Expanded by Default – ページを開いたときに最初のセクションを展開する場合に選択します。

    • Expand on Hover – 選択すると、セクションのタイトルにマウスを合わせると、セクションが展開されます。

  3. Control PropertiesダイアログボックスのStylingセクションでは、アコーディオンのさまざまなスタイルを選択できます。例えば、アコーディオンを水平に表示するには、「 Horizontal Accordion」を選択します。

    In the Styling section select Horizontal Accordion.

タブ レンダリングを追加する

タブ レンダリングでは、一度に1つのタブのコンテンツのみが表示されるタブ付きレイアウト内にコンテンツを表示できます。タブは、関連情報を構造化された方法で表示したい場合に非常に効果的です。たとえば、タブ レンダリングを使用して、ブログ投稿を最近の投稿、人気のある投稿、最もコメントの多い投稿などのカテゴリに整理できます。

タブ レンダリングを追加するには:

  1. ツールボックスから、レンダリングするタブをページにドラッグします。

  2. Select the Associated Contentダイアログボックスで、既存のコンテンツアイテムを選択するか、Createをクリックして新しいコンテンツアイテムを作成します。「Ok」をクリックして、ページにタブコンポーネントを表示します。

    The tab component.

  3. スタイルを変更するには、フローティング ツールバーでEdit the Component Propertiesをクリックします。

  4. Control PropertiesダイアログボックスのStylingセクションで、スタイルを選択してタブの外観を決定します。

    たとえば、左側のタブのアウトラインを設定するには、「 Tabs on left 」をクリックし、「 OK」をクリックします。

    メモ

    Tabs at bottomスタイルを選択した場合は、Tabs Controlセクションで、Tabs at the Bottomチェックボックスもオンにする必要があります。

  5. タブ項目を追加したり、その順序を変更したりするには、ツールバーのボタンを使用します。

    Use the Tab toolbar to change the order of the tabs.
この記事を改善するための提案がある場合は、 お知らせください!