今回はLayoutの3つ目、Tabsについてご紹介していきます。

タブを使用する最大のメリットは、コンパクトに多くの情報を掲載できることです。また、ページ遷移をしないので、ユーザーはメニューを切り替えるだけで簡単に情報の閲覧・比較などができます。
デメリットとしては、一度に全ての情報を表示することができないので、見てもらいたい情報が視覚に入らないこともあります。

デザイン性も含め、上手にタブ機能を使っていきましょう。

Tabs

それではまずはTabsを追加していきましょう。
左パネルのTabsをドラッグし、オレンジの線が出たところで離して追加をします。

するとタブが生成されます。
タブを増やしたい時は＋アイコンをクリックします。

タブをクリックすると、メニューが表示されます。
そのタブのコピーや削除がこちらで可能です。

また下記赤枠の部分をドラッグすることで、タブの位置を変えることも可能です。

タブの設定

タブ全体の設定はこちらの設定アイコンをクリックします。

項目 説明
Default Active Tab ページが読み込まれた時に最初に表示するタブ

 

項目 説明
Minimum Height 行の最小の高さを指定します。


Minimum Heightについてはこちらも参考にしてください。

項目 説明
Tab Navigation Alignment タブのナビの位置を設定します。

 

「高度な設定」についてはこちらでご紹介しておりますのでご覧ください。

各タブの設定

各タブの設定は、編集したいタブをクリックしたときのメニューから、設定アイコンをクリックします。

 

項目 説明
Tab Name タブの名前を設定します。
Minimum Height 行の最小の高さを指定します。
Vertical Alignment ROWの中のコンテンツの位置を指定します。


上述と同様に、Minimum HeightとVertical Alignmentについてはこちらをご参考ください。
また、「Background」と「高度な設定」についてもこちらでご紹介しておりますのでご覧ください。

Tabのご紹介は以上です。
是非色々なレイアウトを試してオリジナルコンテンツを作ってみてくださいね。