Weber更新日誌

組件概述

選項卡是分項切換內容組件，透過上方標籤切換不同內容面板。
組件結構：由【菜單容器】+【內容容器】兩大層級組成。

適用場景

1、產品規格、方案介紹，多個方案分類展示

2、服務內容、常見分類資訊，減少頁面長度

3、課程、案例分類，同一區塊切換不同類別內容

組件使用

1、在編輯器右側【設置】中可以調整選項卡的方向，可以開啟【懸浮切換】功能

2、選中【選項卡】層級可以在編輯器右側【設置】中新增項目，也可以設置好一個【菜單項】的內容樣式複製，方便樣式統一

3、選中【菜單項】層級可以在編輯器右側Class中打開【Data-「te-nav-active」】模式，設定選中樣式

4、【菜單項】可以根據需求自定義調整尺寸、文字版式、邊框圓角、背景、陰影等樣式

5、在【內容項】層級內可以添加任意基礎組件，不建議添加複製的交互組合組件（例如：輪播圖、表單、計算器等），容器導致內容錯誤以及移動端的排版混亂

6、選中【菜單】層級可以在Class的【彈性佈局】➡️【主軸對齊】設置菜單項的對齊方式，可控制菜單項的間距。（注意：在移動端或菜單項過多情況下，菜單容器會自動收縮滾動。這時需要將【主軸對齊】樣式調整成【Start靠左對齊】）

7、滾動容器的【箭頭】可以自定義尺寸、邊距、顏色、背景、樣式，選中【Prev】和【Next】層級可以設置

8、選中【內容容器】層級可以統一設置內容項的邊距、背景、邊框、陰影等樣式

注意事項

1、【菜單項】不能拖拽修改順序，在層級列表內也不允許拖拽修改順序，請輸出內容時先規劃好菜單項順序

2、【菜單項】的文本內容不要過多，在移動端時不便展示