跳至主要内容

Tab 控制項介紹

Tab 用於組織同一業務物件或工作流程中的並列內容。使用者不必離開目前頁面，就能在多個內容區之間切換。它適合資料維護、分階段設定、詳細資料分組及「編輯—審核」工作區。

閱讀本手冊後，你可以：

  • 新增 Tab 容器與多個頁籤
  • 設定 Line、Card 與 Editable Card 外觀
  • 將頁籤放在頂部、右側、底部或左側
  • 設定置中、停用及首次延遲呈現
  • 在不同 Tab 中組合 Form、欄位、按鈕與其他容器
  • 為單一 Tab 或外層 Tab 容器設定 onClick

Tab 僅用於同一物件內的並列檢視。不同業務模組，或需要獨立 URL、權限及選單醒目提示的頁面，應使用頁面選單；不要用大量 Tab 取代應用程式導覽。

1. 範例：活動發布工作區​

Spark Sample 的 Tab 頁面使用一個活動發布工作區說明常見組合：

頁籤內容展示重點
Overview活動名稱、負責人、發布日期、預算與摘要一般表單與草稿操作
Delivery settings管道、受眾、審核開關、預設語言與投放說明Select、Switch 與設定驗證
Review & publish唯讀摘要與發布按鈕延遲呈現、跨頁籤表單狀態與互動
Audit log (coming soon)尚未開放停用頁籤

此範例不依賴後端 Sample API。欄位值保留在目前頁面狀態中，適合先理解 Tab 結構、切換及互動。需要載入業務資料時，可在頁籤內加入 Data Form、DataList、ProTable 或其他資料控制項。

2. 新增 Tab 容器​

  1. 在 Page Designer 中開啟目標頁面。
  2. 展開左側元件面板中的 Containers。
  3. 將 Tab 拖入 Screen 或其他可容納容器控制項的區域。
  4. 選取 Tab 容器，在 Tabs 子元素區域新增頁籤。
  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 Label頁籤顯示名稱，建議簡短且能清楚表達內容範圍
Always Render開啟時在頁面首次載入就呈現；關閉時在第一次切換到該頁籤時呈現
Disabled禁止選取頁籤，適合「即將開放」或目前條件不符合的內容

4.1 Always Render 的選擇​

  • 表單欄位較少或頁籤間需要立即共享狀態時，可以開啟。
  • 圖表、遠端清單或較重元件較多時，可以關閉。
  • 關閉只會延遲第一次呈現；開啟過頁籤後，一般切換不會自動清除輸入狀態。

4.2 Disabled 的選擇​

停用頁籤仍顯示標題，但不切換內容，也不執行該 Tab 的 onClick。永遠不應存取的內容應直接刪除或隱藏；Disabled 適合表示暫時無法使用。

5. 在 Tab 中組織內容​

  1. 每個頁籤只負責一個清楚主題。
  2. 表單內容先加入 Form，再將欄位放入 Form，以統一欄數、標籤比例、版面配置與驗證。
  3. 頁面主要操作放在最後的審核頁籤或固定區域，不要在每個頁籤重複相同按鈕。
  4. 資料清單較重時關閉 Always Render。
  5. 頁籤超過 5～7 個時，重新檢視資訊架構，將低頻內容移到分組、Drawer 或獨立頁面。

範例中的 Overview 與 Delivery settings 使用可編輯 Form，Review & publish 使用同名欄位的唯讀 Form。前兩個頁籤修改值後，審核頁籤會顯示最新頁面狀態。

6. 設定互動​

Tab 支援兩層點擊互動：子 Tab 的 onClick 與外層 Tab 容器的 onClick。

  1. 在畫布或子元素清單中選取目標 Tab。
  2. 開啟右側 Interaction。
  3. 在 onClick 下新增 Toast、設定頁面內容、呼叫 API 或其他動作。
  4. 儲存頁面並進入執行階段驗證。

選取可用頁籤時，系統先執行子 Tab 的 onClick，再執行外層容器的 onClick。停用頁籤不執行互動。範例為 Review & publish 與其發布按鈕分別設定了提示訊息。

7. 重現範例​

  1. 新增 Tab，保留 line、top 與不置中設定。
  2. 新增 Overview、Delivery settings、Review & publish、Audit log (coming soon)。
  3. 為前三個 Tab 各加入一個雙欄 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 點擊頁籤沒有執行互動​

  • Interaction 是否設定在真正的子 Tab，而不是內部 Form。
  • 事件是否為 onClick。
  • Tab 是否為 Disabled。
  • 頁面是否已儲存，執行階段是否使用目前版本。

8.3 切換頁籤後欄位值消失​

確認欄位使用穩定且唯一的 Name。需要跨頁籤顯示同一值時，編輯區與唯讀區應使用同一 Name；不同 Name 代表彼此獨立的頁面狀態。

8.4 首次開啟頁面很慢​

對包含遠端清單、圖表或較多欄位的非首屏 Tab 關閉 Always Render，只在第一個頁籤保留必要內容。

9. 設計建議​

  • 頁籤名稱使用名詞或簡短動作片語，例如 Overview、Configuration、History。
  • 同一組頁籤保持相近的資訊層級，不要將 Details、System settings、Sign out 放在同一層。
  • 重要錯誤、未儲存狀態與發布結果不要只依賴頁籤顏色，應同時提供可讀文字。
  • 行動裝置應優先精簡頁籤數量；左右位置較適合桌面端局部工作區。
  • 需要獨立連結、瀏覽器前進後退或選單權限時，使用獨立頁面與選單。
最後於 更新