タブブロックの使い方

タブブロックの解説をします。

タブブロックの追加

タブの追加

左上の「＋」ボタンをクリックします。

【LPC】レイアウトから「タブ」をクリックします。

もしくは　/tabs のショートカットでも追加できます。

以下のようなタブブロックが表示されます。

ツールバー上、もしくはエディター上の「＋」をクリックするとタブの要素が出てきます。

タブを追加したい場合は同じように追加します。

タイトルとアイコンの追加

タブをクリックすることでタブを選択状態にします。

タブに表示する内容は「右パネル」のテキストから追加します。

お気に入りに登録したアイコンもここからタブに追加します。

タブの移動と削除

ツールバーに表示される ＜　と　＞　を押すとアクティブ中のタブが左右に移動します。

ゴミ箱マークを押すと削除されます。

確認ウィンドウは表示されませんのでご注意下さい。

スタイルの設定

全体のスタイルは上位のタブ設定から行います。

上位のタブ設定は、以下の赤枠の箇所あたりをクリックすると右パネルに設定パネルが表示されます。

スタイルは「タブ」「ボタン」「シンプル」から選択できます。

「タブ」スタイル

タブとコンテンツ領域がくっついた通常のタブスタイルです。

タブの背景色と、コンテンツの背景色は同じになります。

タブが横幅に入り切らずにはみ出した場合、横スクロールで表示されます。

タブ幅は「文字に合わせる」もしくは「均等幅」から選択できます。

「均等幅」を選択した場合は、端末に応じてタブ幅を設定します。

「ボタン」スタイル

タブとコンテンツ領域が離れ、タブをボタンのように表示するスタイルです。

タブの背景色と、コンテンツの背景色は別々に設定が可能です。

タブがはみ出した場合の設定は「スクロール」か「そのまま表示」かを選択できます。

「均等幅」を選択した場合は、「タブ」スタイルと同じように、端末に応じてタブ幅を設定するか、もしくは列数を設定できます。

列数は１行に表示させるタブ数になります。

「シンプル」スタイル

タブとコンテンツ領域が離れ、タブは背景のないテキストのみを表示するスタイルです。

タブが選択された時（hover時含む）はテキストに下線がつきます。

背景がないため、通常の背景色は設定できません。

タブが選択された時（hover時含む）の下線色や、テキスト色は設定できます。

タブの表示幅やはみ出し設定は「ボタン」スタイルと同じです。

色の設定

各スタイルにより設定できるカラーが異なります。

カラー設定の右上にある点三つのアイコンをクリックすると、設定をリセットできます。

上記のように各タブ毎に個別に色の設定も可能です。

アイコンのスタイル設定

アイコンには表示位置と囲みスタイルが設定できます。

また、アイコンの色、囲みスタイルを「なし」以外にした場合は背景色を変更できます。

アイコンサイズもここから変更できます。

アイコンのスタイルは全てのタブで共通になります。

その他の設定

初期表示するタブ

フロントページで画面が表示された時に一番最初に表示させるタブを選択できます。

フォントサイズと余白の設定

タブの文字サイズ以外にも、タブ下の余白やタブ内の上下・左右の余白、コンテンツ領域（ボティ内）の上下・左右の余白、タブブロック自体の上・下の余白が設定できます。

タブスタイルの場合は「タブ下の余白」は設定できません

コンテンツ（ボティ）の高さ設定

コンテンツを入れる領域は「コンテンツの高さ」を「固定」にしてスクロール表示することができます。

長いコンテンツになった場合、スクロールを上に戻さずに他のタブが選択できるようになります。

---

マニュアルTOP