タブパネルを追加する.
関連コンテンツのいくつかの塊を1か所に置き、一度に1つだけ見せたい場合は タブを使います。最後にはタブラベルの列が残り、訪問者はラベルをクリックして 中身を見ます。例ではサービスごとに1タブの代理店ページを作ります。一問一答は コラプスパネルの方が 読みやすい場合が多いです。
タブパネルを追加する
- カラムにホバーしてコントロールバーの+をクリックするか、空カラム 中央の+をクリックしてエレメントピッカーを開きます。
- 開いてLayoutタブでTabsをクリックします。Titleと 名付けたタブ1つ付きでエレメントが現れます。
- タブのパネルにホバーしてMore > Settingsを開きます。 Tab titleに名前を入力してSaveをクリックします。
- パネル内の+をクリックしてコンテンツを追加します (例: Textエレメント)。
- タブを追加するには、タブラベルにホバーしてTabsコントロールバーの Add tabをクリックします。新しいタブは先頭に付き、他の前に来ます。 同じように名前を付けて中身を入れます。
表示結果
開いているタブの中身の上にタブラベルの列が座ります。プレビューと公開ページでは、 ラベルのクリックでそのタブの中身が表示され、他は隠れます。各タブが独自の エレメントを持つので、あるタブにテキスト、別のタブにカード一式を置けます。 768ピクセル未満の画面ではタブが積み重なった見出しに変わり、コラプスパネルの ように開きます。
タブの設定
エレメントTabsには3つの設定があります。More > Settingsはタブラベルにホバーすると表示されるTabsコントロールバーで 開きます。
| 設定 | 内容 | 既定値 |
|---|---|---|
| Tab direction | ラベルの位置です。Default (コンテンツの上)、Left、Right | Default |
| Style | ラベルの見た目です。Default (ラベル下の線)、Modern (角丸カード)、Accordion (区切り線付き見出し) | Default |
| Mobile friendly | 768ピクセル未満の画面でタブを折りたたみ見出しとして表示します | On |
各タブにはパネルのMore > Settingsに独自の設定があります。 Tab titleはラベルのテキストです。Tab descriptionは開いている タブのラベル下に出る任意の短い行です。
タブの管理
- Reorder: タブラベルをラベル間で新しい場所へドラッグします。中身も 一緒に移動します。
- Rename: タブのパネルにホバーしてMore > Settingsを 開き、Tab titleを変えてSaveをクリックします。
- Remove: タブのパネルにホバーしてMoreを開き、 Deleteを選びます。タブの中身はすべて一緒に削除されます。
ラベルは1語から3語に保ち、タブは5つ程度に保つと、ラベルが1行に収まります。
表示されない場合
- 新しいタブが最後ではなく最初にできます。 Add tabは常に 新しいタブを先頭に置きます。ラベルを希望の場所へドラッグします。
- 設定にTab titleとTab descriptionしか出ません。 1つのタブの 設定を開いています。タブラベルにホバーしてTabsコントロールバーを 出し、そこでMore > Settingsを開きます。
- 携帯電話ではタブではなく積み重なった見出しが出ます。 Mobile friendlyがオンです (既定)。タブを全画面幅で保つには Tabs設定でオフにします。
- TabsがピッカーのLayoutタブにありません。
DXPR Builderユーザープロファイルに含まれていません。管理者がTabsを
プロファイルのElements下でチェックします (
/admin/dxpr_studio/dxpr_builder/profile)。
次はこちら
- 折りたたみパネルを追加する: 1つずつ開く一問一答を積み重ねます。
- カルーセルレイアウトを追加する: 同種のコンテンツをスライドで順に見せます。
- ネスト: 豊かなレイアウトのためにタブの中にローとカラムを入れます。