Weber更新日誌

組件概述

滾動選項卡是可橫向滑動的分頁切換組件，由選項標籤列表 + 對應內容面板構成。電腦端可點擊選項切換、手機支援橫向滑動瀏覽全部標籤，適合多組內容分類展示，節省頁面垂直空間。

適用場景

1、產品多規格、多版本切換介紹

2、服務項目、案例分類展示、功能模塊分頁說明

3、手機空間有限，但標籤數量較多，需要橫向滾動查看全部 tab

不建議使用場景

1、只有 2～3 個固定標籤、不需要橫向滑動：可用普通【選項卡組件】

2、大篇幅長文章：建議使用搭配側邊導航的【章節版面】

3、純圖片展示，不需要分類切換：優先【網格組件】

組件使用

1、建議直將組件拖入【區域】內使用不用再在外層添加容器組件

2、在各個內容面板放入文本、圖片、網格、按鈕、Div 等任意子組件；手機端支持橫向滑動標籤列表，查看被截斷的標籤

使用示例

1. 拖入【滾動選項卡】到容器內

2. 右側基礎設定，新增 / 刪除選項，修改各標籤文字（基礎版 / 專業版 / 企業版）

3. 設定預設激活項為「基礎版」

4. 分別切換到各內容面板，放入文字、圖片、價格按鈕

5. 開啟標籤滾動，調整標籤選中樣式（例如增加底部高亮線）

6. 預覽測試：電腦點擊切換；手機橫向滑動標籤，點擊切換內容