タブは、画面のセクションを切り替え可能なコンテンツパネルに分割します。ユーザーがタブヘッダーをタップすると、その下のパネルが対応する内容に切り替わります。

タブの追加・削除・選択

各タブは2つのパーツで構成されています。

• タブヘッダー — クリックできるラベル（Tab 1、Tab 2 など）。
• タブコンテンツ — タブごとに1つのコンテナ。コンテンツコンテナに配置したものが、そのタブが選択されたときに表示されます。

Add tab をクリックすると、新しいタブが追加されます。追加した各タブには、対応するコンテンツコンテナが自動的に作成されます。

画面が最初に表示されたときに特定のタブをアクティブにするには、Selected by default をオンにしてください。

タブのスタイル設定

テンプレート

フロービルダーでは、すぐに使える3種類のタブテンプレートを用意しています。

• Segment control — 選択中のタブに角丸の枠が付いた、ピル形状のスイッチャー。
• Button Tabs — ボタン風のスタイルを持つ独立したタブ。
• Underline — 選択中のタブをアンダーラインで示すテキストラベル。

タブの状態

各タブには状態切り替え（Default / Selected）があり、アクティブ状態と非アクティブ状態のスタイルをそれぞれ個別に設定できます。テキストスタイル、色、塗りつぶし、ボーダーを状態ごとに変更できます。

選択グループ

タブは単一選択グループです。常にひとつのタブだけがアクティブになります。グループの管理は Screen settings パネルの Selectable groups セクションから行えます。

グループは2つの変数を提供します。

• tabs.selectedOptionId — 選択中のタブのID。条件式で使用できます。
• tabs.selectedOptionTitle — 選択中のタブのラベル。動的テキストで使用できます。

グループ名を変更した場合は、tabs の部分をカスタムの Group ID に置き換えてください。

詳細は 選択可能な要素とグループ をご覧ください。