RhTabs

RhTabs 是基於 RhSlider 的二次封裝

詳細用法見可參考以下範例 Template


RhTabs 由於相依於 RhSlider，RWD 無法做到 100 分

因此，若要測試斷點設定，請重新整理確認 server side 有無跑版。

若要測試 Tablet 裝置，需在 Chrome devtools 選擇 iPad series 才會正常偵測。

基礎用法

項目出界時會有橫向指示器。

若項目橫向寬度不足時，加上 class="max-w-max md:mx-auto" 即可保持置中。

Tab Item 1
Tab Item 2
Tab Item 3
Tab Item 4
Tab Item 5
Tab Item 6
Tab Item 7
Tab Item 8
Tab Item 9
Tab Item 10
Tab Item 11
Tab Item 12
Tab Item 1
Tab Item 2
Tab Item 3
Tab Item 4
Tab Item 5

覆寫預設值

Desktop: 分頁項目寬度等分 (even)

Tablet / Mobile: 分頁項目寬度自動 (auto)

Tab Item 1
Tab Item 2
Tab Item 3
Tab Item 4
Tab Item 5

指定分頁項目寬度（固定寬度）

直接為 TabItem 添加 class，設定 width

不可設定 options: { width: number }，Swiper 臨界點計算有些微妙，若照此設定將無法保證畫面正常操作。

Tab Item 1
Tab Item 2
Tab Item 3
Tab Item 4
Tab Item 5
Tab Item 6
Tab Item 7
Tab Item 8
Tab Item 9
Tab Item 10
Tab Item 11
Tab Item 12

指定分頁項目最小寬度（變動寬度）

直接為 TabItem 添加 class，設定 min-width

consequatur accusamus et
dolor eveniet eaque
veniam
vel aut delectus
nisi dignissimos nemo
excepturi consequatur
nesciunt placeat sequi
quaerat consequatur veritatis

控制器出界

設定 controllerPosition: 'outer'

Tab Item 1
Tab Item 2
Tab Item 3
Tab Item 4
Tab Item 5
Tab Item 6
Tab Item 7
Tab Item 8
Tab Item 9
Tab Item 10
Tab Item 11
Tab Item 12