タブコンポーネント

コアコンポーネントのタブコンポーネントを使用すれば、コンテンツを複数のタブ上に配置できます。

使用方法

タブコンポーネントを使用すれば、コンテンツ作成者はコンテンツを複数のタブ内に配置できます。

編集ダイアログでは、コンテンツ作成者が、複数のタブを定義したりアクティブなタブを設定したりできます。デザインダイアログを使用すれば、テンプレート作成者は、タブに追加できるコンポーネントを定義したり、スタイルをカスタマイズしたりできます。

ヒント

ネストされたタブコンポーネント（タブ内のタブ）はサポートされています。

コンテンツツリーを使用した特定や選択は、単純な（ネストされていない）タブコンポーネントでは可能ですが、ネストされたタブでは不可能です。

バージョンと互換性

このドキュメントでは、タブコンポーネントの現在のバージョン（2018年10月にコアコンポーネントのリリース 2.2.0 で導入された v1）について説明します。

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

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1
リリース 2.17.4 以前と互換性あり		 互換性あり 互換性あり

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

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

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

技術的詳細

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

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

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

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

次の手順を実行します。

  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 に移動すると、ブラウザーは特定のコンポーネントまで直接スクロールし、指定したパネルを表示します。デフォルトでパネルが展開されないように設定されている場合は、自動的に展開されます。

編集ダイアログ

編集ダイアログでは、コンテンツ作成者がタブの作成、名前変更、並べ替えを行ったり、アクティブなタブを定義したりできます。

「項目」タブ

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

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

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

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

「プロパティ」タブ

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

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

「アクセシビリティ」タブ

タブコンポーネントの編集ダイアログの「アクセシビリティ」タブ

「アクセシビリティ」タブでは、コンポーネントの「ARIA アクセシビリティ」ラベルの値を設定できます。

  • ラベル - コンポーネントの ARIA ラベル属性の値

パネルを選択

コンテンツ作成者は、コンポーネントツールバーの「パネルを選択」オプションを使用して、編集用に別のパネルに切り替えたり、簡単にタブを並べ替えたりできます。

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

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

  • リスト内のタブは割り当てられた順番で並べられ、その順番が通し番号に反映されます。
  • まずタブのコンポーネントタイプが表示され、次にタブの説明が明るい色のフォントで表示されます。

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

  • ドロップダウン内の 1 つのエントリをタップまたはクリックすると、エディターのビューがそのタブに切り替わります。
  • ドラッグハンドルを使用すれば、タブをインプレースで並べ替えることができます。
メモ

編集​モードでは、作成者がタブを選択することはできません。公開されているコンテンツを読者と同じ立場でタブを操作するには、プレビュー​モードまたは「公開されているとおりに表示」オプションを使用します。

デザインダイアログ

デザインダイアログでは、テンプレート作成者が、タブコンポーネントに項目として追加できるコンポーネントを定義したり、コンテンツ作成者が利用できるカスタムスタイルを定義したりできます。

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

「許可されるコンポーネント」タブでは、コンテンツ作成者がタブコンポーネントに項目として追加できるコンポーネントを定義できます。

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

「スタイル」タブ

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

Adobe Client Data Layer

タブコンポーネントは、Adobe Client Data Layer をサポートしています。

このページ