タブコンポーネント tabs-component

Last update: Tue Feb 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

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

使用方法 usage

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

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

TIP

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

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

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

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

コンポーネントのバージョン

AEM 6.4

AEM 6.5

AEM as a Cloud Service

リリース 2.17.4 以前と互換性あり

互換性あり

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

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

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

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

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

次の手順を実行します。

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

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

すべてのコアコンポーネントは、完全にレスポンシブに動作するように設計されており、デバイス間のシームレスなエクスペリエンスを実現します。

タブコンポーネントなど、一部の高度なコンポーネントでは、あらゆる状況での応答性を維持するために、実装プロジェクトのコンテキスト内で特定の検討が必要になる場合があります。詳しくは、コアコンポーネントのレスポンシブデザインを参照してください。

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

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

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

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

TIP

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

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

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