メインコンテンツまでスキップ

Tab コンポーネント

Tab は、同じ業務オブジェクトやワークフローに属する並列コンテンツを整理します。ユーザーはページを離れずに表示領域を切り替えられます。情報の保守、段階的な設定、詳細のグループ化、編集と確認を行うワークスペースに適しています。

このガイドでは、複数の Tab の追加、Line／Card／Editable Card の外観、上下左右の位置、中央寄せ、無効化、初回レンダリングの遅延、Form やフィールドの配置、各 Tab と外側コンテナの onClick を説明します。

Tab は同じオブジェクト内の並列ビューに使用します。独立した URL、権限、メニュー選択状態が必要な別モジュールにはページメニューを使用し、多数の Tab でアプリケーションナビゲーションを代用しないでください。

1. 例：キャンペーン公開ワークスペース​

Spark Sample の Tab ページは次の構成です。

Tab内容主なポイント
Overview名前、担当者、公開日、予算、概要通常のフォームと下書き保存
Delivery settingsチャネル、対象、承認、言語、配信メモSelect、Switch、設定検証
Review & publish読み取り専用の要約と公開ボタン遅延レンダリング、Tab 間の状態、操作
Audit log (coming soon)未公開無効な Tab

この例はバックエンドの Sample API に依存しません。値は現在のページ状態に保持されます。業務データを読み込む場合は、Tab 内に Data Form、DataList、ProTable などを追加します。

2. Tab コンテナを追加する​

  1. 対象ページを Page Designer で開きます。
  2. 左側の Containers を展開します。
  3. Tab を Screen またはコンテナを配置できる領域へドラッグします。
  4. Tab を選択し、Tabs 子要素領域で Tab を追加します。
  5. 各子 Tab を選択して Tab Label を入力します。
  6. 対応する領域へ Form、フィールド、ボタンなどを配置します。
Tab
├── Overview
│   └── Form
├── Delivery settings
│   └── Form
├── Review & publish
│   └── Form
└── Audit log (coming soon)

3. Tab コンテナを設定する​

プロパティ値説明
Tab Styleline、card、editable-cardLine は下線、Card はカード形式、Editable Card は編集可能カードの外観のみを使用します
Tab Positiontop、right、bottom、leftラベルをコンテンツのどの方向に置くかを指定します
Center Tabsオン／オフ上下配置ではラベルを中央寄せし、左右配置では縦並びを維持します

editable-card でも、実行時のユーザーはページ構造を追加・削除できません。Tab の数と順序は Page Designer で管理します。

スタイルや位置を選ぶとデザインキャンバスにすぐ反映されます。保存すると、実行時にも保存済み設定が表示されます。

4. 各 Tab を設定する​

プロパティ説明
Tab LabelTab に表示する短く明確な名前
Always Renderオンなら初回ロード時、オフなら最初に開いた時に内容をレンダリングします
Disabled選択を禁止します。準備中または条件未達の内容に適しています

4.1 Always Render​

  • フィールドが少ない、または状態をすぐ共有する場合はオンにします。
  • グラフ、リモートリスト、重いコンポーネントが多い場合はオフにします。
  • オフでも遅れるのは初回だけで、一度開いた後の通常の切り替えで入力値は自動消去されません。

4.2 Disabled​

無効な Tab はラベルを表示しますが、内容を切り替えず onClick も実行しません。常にアクセス不可なら構造を削除または非表示にし、Disabled は一時的な利用不可に使います。

5. Tab 内のコンテンツを整理する​

  1. 各 Tab に明確なテーマを一つだけ持たせます。
  2. フォームでは先に Form を追加し、その中へフィールドを置いて列数、ラベル比率、レイアウト、検証を統一します。
  3. 主要アクションは最後の確認 Tab または固定領域に置きます。
  4. 重いデータリストでは Always Render をオフにします。
  5. 5～7 個を超える場合は構成を見直し、低頻度の内容をグループ、Drawer、別ページへ移します。

例の Overview と Delivery settings は編集可能な Form、Review & publish は同名フィールドの読み取り専用 Form です。前の Tab で値を変更すると、確認 Tab に最新値が表示されます。

6. インタラクションを設定する​

Tab は子 Tab と外側 Tab コンテナの二段階の onClick に対応します。

  1. キャンバスまたは子要素一覧で対象 Tab を選択します。
  2. 右側の Interaction を開きます。
  3. onClick に Toast、ページコンテキスト更新、API 呼び出しなどを追加します。
  4. 保存し、実行時に確認します。

有効な Tab を選択すると、子 Tab の onClick、外側コンテナの onClick の順に実行されます。Disabled の Tab は実行しません。例では Review & publish と公開ボタンにそれぞれメッセージを設定しています。

7. サンプルを再現する​

  1. Tab を追加し、line、top、中央寄せオフにします。
  2. Overview、Delivery settings、Review & publish、Audit log (coming soon) を追加します。
  3. 最初の三つに 2 列 Horizontal の Form を追加します。
  4. Overview に Input、DatePicker、TextArea、Save draft を追加します。
  5. Delivery settings に Dropdown Select、Switch、Input、TextArea、Validate settings を追加します。
  6. Review & publish に読み取り専用フィールドと Publish campaign を追加し、Always Render をオフにします。
  7. Audit log を Disabled にし、Always Render をオフにします。
  8. Review & publish の onClick に Info Toast を追加します。
  9. 三つのボタンにも Toast を追加します。例：
Campaign [[campaignName]] is ready for [[campaignChannel]].

8. トラブルシューティング​

8.1 スタイルや位置が実行時に変わらない​

ページが保存済みで、実行 URL が現在の設計バージョンの versionId を使用しているか確認します。キャンバスは即時プレビューしますが、実行時は保存済み Page JSON を読み取ります。

8.2 Tab をクリックしても動作しない​

  • Interaction が内部 Form ではなく実際の子 Tab に設定されているか。
  • イベントが onClick か。
  • Tab が Disabled でないか。
  • ページが保存済みで、実行時に現在のバージョンを使用しているか。

8.3 切り替えるとフィールド値が消える​

各フィールドに安定した一意の Name が必要です。同じ値を共有する編集領域と読み取り専用領域では同じ Name を使用します。異なる Name は独立したページ状態です。

8.4 初回表示が遅い​

リモートリスト、グラフ、多数のフィールドを含む初期表示以外の Tab では Always Render をオフにします。

9. 設計上の推奨事項​

  • Overview、Configuration、History のような名詞または短い動作句を使います。
  • 同じグループでは情報階層をそろえ、Details、System settings、Sign out を同列に置かないでください。
  • 重要なエラー、未保存状態、公開結果を色だけで示さず、読める文言も表示します。
  • モバイルでは Tab 数を減らします。左右配置はデスクトップの部分的なワークスペースに適しています。
  • 独立 URL、ブラウザ履歴、メニュー権限が必要なら別ページとメニューを使います。
に最終更新