> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# タブ

> YiDAのタブコンポーネントについて、標準型とカプセル型の2種類のスタイルとレイアウト活用方法を解説します。コンポーネントの選択、タブ項目の設定、サイズやコンテンツ余白の調整に加え、タイル化・遅延読み込みなどのプレミアム機能、スタイルカスタマイズ手順も紹介します。

## 1. はじめに

一般的な形式には標準型とカプセル型の2種類があります。タブは主にレイアウト用途で使用し、他のコンポーネントと組み合わせて利用できます。

ハイライト：コンポーネントのサイズは制御できますが、タブコンポーネントの配置位置（左寄せ・中央寄せ・右寄せ）は移動できません。

## 2. 手順

### 2.1 コンポーネントの選択

コンポーネントを選択し、デザイナー上にドラッグします。

コンポーネントを追加します。

### 2.2 タブ項目の設定

* タブ項目：複数のタブ項目を追加できます。数が多くなった場合は、表示モードを設定します。

表示モード。

タブ項目を追加します。

* 形式：タブ項目の表示形式を指します。標準、折り返し、テキスト、カプセルの4種類があります。

* サイズ：デフォルトは中サイズです。

* コンテンツ余白：調整可能です。デフォルトは20px 20pxです。

タブ項目の形式。

### 2.3 プレミアム

#### 2.3.1 タイル化の有効化

タイルのドラッグ&ドロップに対応しており、チャートの幅・高さ・位置を瞬時に調整できます。

#### 2.3.2 遅延読み込み

有効化すると、タブ項目のコンテンツは該当タブに切り替えたときにのみ読み込まれます。

#### 2.3.3 切替時に破棄

「切替時に破棄」を有効化すると、タブを切り替えるたびに青色の稲妻型の読み込みアイコンが表示され、データが再読み込みされます。下図をご参照ください。

#### 2.3.4 位置指定の有効化

位置指定を有効化した状態でタブ項目を選択すると、ブラウザのURLに該当タブ項目のサフィックスが追加されます。このリンクを貼り付けて開くと、指定したタブ項目が選択された状態でアプリが表示されます。

#### 2.3.5 バッジの有効化

「バッジの有効化」をオンにすると、下部にバッジ設定が表示されます。バッジの構成にはコードの記述が必要です。

### 2.4 スタイルの設定

デフォルト状態やその他のスタイルを調整します。

例：上部マージンや枠線の表示を調整します。