台灣正體

分頁模組

透過分頁籤群組來開關內容。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
你尚未有任何交易紀錄。
你的帳戶目前有 3,000 元。
<div class="ts-tab is-pilled">
    <button class="item is-active" data-tab="logs">交易紀錄</button>
    <button class="item" data-tab="info">帳戶資訊</button>
</div>
<div class="ts-segment" data-name="logs">
    你尚未有任何交易紀錄。
</div>
<div class="ts-segment" data-name="info">
    你的帳戶目前有 3,000 元。
</div>
概要

這個 JavaScript 模組主要與分頁籤元件搭配,可以讓使用者點擊分頁籤項目時,顯示指定的內容並隱藏其他無關內容。

分頁籤裡面的項目套用 [data-tab="分頁名稱"] 並在目標分頁內容套用 [data-name="分頁名稱"],就能夠透過點擊分頁籤項目來切換對應的分頁內容可見度。

初始化時,沒有被啟用的內容會被隱藏。

※ Tocas UI 的 JavaScript 模組文件呈現方式正在改善。

在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標