Show Menu
TOPICS×

タブコンポーネント

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

使用方法

タブコンポーネントを使用すれば、コンテンツ作成者はコンテンツを複数のタブ内に配置できます。
編集ダイアログ では、コンテンツ作成者が、複数のタブを定義したりアクティブなタブを設定したりできます。 デザインダイアログ を使用すれば、テンプレート作成者は、タブに追加できるコンポーネントを定義したり、スタイルをカスタマイズしたりできます。
ネストされたタブコンポーネント(タブ内のタブ)はサポートされています。
コンテンツツリー を使用した特定や選択は、単純な(ネストされていない)タブコンポーネントでは可能ですが、ネストされたタブでは不可能です。

バージョンと互換性

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

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

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

技術的詳細

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

編集ダイアログ

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

「項目」タブ

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

「プロパティ」タブ

プロパティ
」タブでは、コンテンツ作成者はページの読み込み時にアクティブになるタブを定義できます。「
デフォルト
」オプションの場合、最初のタブが選択されます。

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

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

パネルを選択

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

デザインダイアログ

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

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

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

「スタイル」タブ

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