タブ
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
要点
タブ要素は、同じポータルページ領域内のコンテンツを複数のセクションに整理し、ページを離れることなくセクションを切り替えられるようにします。
1. 概要
タブは、コンテナー、タブヘッダー、タブ項目、タブパネルの4つの異なるレイヤーで構成される複合要素です。
- タブコンテナー：タブヘッダーとすべてのタブパネルを含む、タブ要素全体を格納する最外層のラッパーです。
- タブヘッダー：すべてのタブ項目を表示し、ユーザーが項目を切り替えられるナビゲーション領域です。
- タブ項目：ヘッダー内にある個別のタブです。ラベルまたはアイコンで識別され、個別のコンテンツセクションを表します。
- タブパネル：各タブ項目に関連付けられたコンテンツ領域です。コンテナーとして機能し、ポータルページデザイナーで利用できる任意の要素やプリセットを配置できます。
メモ：1つのタブ要素に追加できるタブ項目は最大15件です。
この要素には、初期の配置方向と表示スタイルが異なる8種類のプリセットがあります。作成領域に追加した後、表示プロパティとスタイルプロパティを使用してカスタマイズできます。
適した用途：
- 複数のデータビューやセクションを含むダッシュボードレイアウト
- さまざまなカテゴリーのオプションをタブで整理する設定ページ
- 概要、活動、設定などのセクションを含むプロフィールページ
- 関連コンテンツをグループ化することでスクロールを減らし、ユーザーが現在のコンテキストを維持できるページ
2. 表示プロパティ
タブ要素をクリックすると、次の表示プロパティが表示されます。
| プロパティ | 説明 |
| ［要素名］ | このタブ要素の内部識別子です。この名前はデザイナー内に配置した際に自動生成され、必要に応じてカスタマイズできます。 |
| ［ラベルの種類］ | タブ項目のラベルは、次のいずれかを表示するようにカスタマイズできます。
|
| タブ項目の一覧 | このセクションでは、各タブ項目に対して次の管理操作を行えます。
メモ：表示するタブを常に1つ以上残す必要があります。表示されているタブが1つだけの場合、そのタブを非表示にしたり削除したりすることはできません。
|
| ［デフォルトタブ］ | ポータルページの初回読み込み時に表示されるアクティブなタブです。 |
3. スタイルプロパティ
タブ要素は、コンテナー、タブヘッダー、タブ項目、およびタブパネルの4つの独立したレイヤーでスタイルを設定できます。タブ項目には、［デフォルト］、［ホバー］、［アクティブ］の3つの操作時の状態があり、それぞれ個別にスタイルを設定できます。
- ［タブのスタイル］
- ［背景］
- ［枠線］
- ［外側の余白］
- ［内側の余白］
- ［角の丸み］
- ［影］
4. 実際に試す
タブ要素を追加し、次を試してください。
- ［アイコンとテキスト］を使用する横向きのプリセットを選択します。［表示］タブを開き、各タブのラベルをページのセクションに合わせて、たとえば［概要］、［活動］、［設定］などに変更します。
- タブ項目の［デフォルト］状態には控えめなテキスト色、［ホバー］状態にはやや明るい背景、［アクティブ］状態には単色の背景と対照的なテキスト色を設定します。
- ［概要］パネル内に縦方向のスタックを追加し、その中にテキスト要素と画像要素を配置して、パネルにコンテンツを追加します。
- 縦向きのプリセットに切り替え、タブ要素の［幅］を固定ピクセル値に設定して、サイドバー形式のタブナビゲーションを作成します。
- コンテナーに［エレベーション2］の［影］を適用し、［角の丸み］を12pxに設定して、タブ要素全体をカードのような外観にします。
5. 関連トピック
- ポータルページの設定と管理
- タブのスタイル設定 *リンク*