分頁籤

將內容以群組整理,並以分頁的方式同時間只呈現一項內容。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-tab">
    <a class="item">
        <span class="ts-icon is-list-icon"></span>
        項目
    </a>
    <a class="item is-active">
        <span class="ts-icon is-chart-line-icon"></span>
        活動
    </a>
    <a class="item">
        <span class="ts-icon is-scroll-icon"></span>
        合約
    </a>
</div>
狀態
啟用的

指示目前所在的位置項目。

<div class="ts-tab">
    <a class="item">通話紀錄</a>
    <a class="item is-active">簡訊</a>
    <a class="item">安全防護</a>
    <a class="item">聯絡人</a>
</div>
停用的

使項目呈現無法互動、點擊的模樣。若項目是超連結,則需套用 .is-disabled 樣式。

<div class="ts-tab">
    <a class="item">
        <span class="ts-icon is-compass-icon"></span>
        探索
    </a>
    <button class="item" disabled>
        <span class="ts-icon is-car-icon"></span>
        出發
    </button>
    <a class="item is-disabled">
        <span class="ts-icon is-bell-icon"></span>
        最新動態
    </a>
</div>
外觀
藥丸的

讓分頁項目帶有圓角使其看起來像藥丸。

<div class="ts-tab is-pilled">
    <a class="item">詳細資訊</a>
    <a class="item is-active">擁有者</a>
    <a class="item">區塊鏈資訊</a>
    <a class="item">屬性</a>
</div>
次要的

使啟用項目的語氣不會那麼沈重。

<div class="ts-tab is-secondary is-pilled">
    <a class="item">
        <span class="ts-icon is-list-icon"></span>
        交易紀錄
    </a>
    <a class="item">
        <span class="ts-icon is-money-check-dollar-icon"></span>
        內部轉移
    </a>
    <a class="item is-active">
        <span class="ts-icon is-calendar-day-icon"></span>
        事件
    </a>
    <a class="item">
        <span class="ts-icon is-chart-bar-icon"></span>
        分析
    </a>
</div>
短指示的

指示器不會超過分頁項目本身的長度。

<div class="ts-tab is-short-indicated">
    <a class="item">收藏</a>
    <a class="item is-active">音樂</a>
    <a class="item">影片</a>
</div>
<div class="ts-tab is-very-short-indicated">
    <a class="item">收藏</a>
    <a class="item is-active">音樂</a>
    <a class="item">影片</a>
</div>
片段的

以區段的方式呈現出一個切換器的效果。

<div class="ts-tab is-segmented">
    <a class="item">項目</a>
    <a class="item is-active">群組</a>
    <a class="item">資訊</a>
</div>
顯目指示的

啟用的項目會較為明顯,而其他分頁項目則會淡化呈現。

<div class="ts-tab is-highlighted">
    <a class="item">首頁</a>
    <a class="item is-active">通知</a>
    <a class="item">社團</a>
</div>
流動的

使整個分頁籤符合父容器的寬度。

<div class="ts-tab is-fluid">
    <a class="item">個人檔案</a>
    <a class="item is-active">裝備</a>
    <a class="item">道具</a>
    <a class="item">技能</a>
</div>
項目對齊

更改項目的起始位置。

<div class="ts-tab is-start-aligned">
    <a class="item">相片</a>
    <a class="item is-active">搜尋</a>
    <a class="item">共享</a>
</div>
<div class="ts-tab is-center-aligned">
    <a class="item">相片</a>
    <a class="item is-active">搜尋</a>
    <a class="item">共享</a>
</div>
<div class="ts-tab is-end-aligned">
    <a class="item">相片</a>
    <a class="item is-active">搜尋</a>
    <a class="item">共享</a>
</div>
尺寸

更改分頁籤的大小。

<div class="ts-tab is-small is-pilled">
    <a class="item">詳細資訊</a>
    <a class="item is-active">擁有者</a>
    <a class="item">區塊鏈資訊</a>
</div>
<div class="ts-tab is-pilled">
    <a class="item">詳細資訊</a>
    <a class="item is-active">擁有者</a>
    <a class="item">區塊鏈資訊</a>
</div>
<div class="ts-tab is-large is-pilled">
    <a class="item">詳細資訊</a>
    <a class="item is-active">擁有者</a>
    <a class="item">區塊鏈資訊</a>
</div>
寬鬆的

使項目之間看起來更寬鬆。

<div class="ts-tab">
    <a class="item is-active">未讀</a>
    <a class="item">全部通知</a>
    <a class="item">封存</a>
</div>
<div class="ts-tab is-relaxed">
    <a class="item is-active">未讀</a>
    <a class="item">全部通知</a>
    <a class="item">封存</a>
</div>
較密的

變更元件的內距,令元素之間看起來更密集。

<div class="ts-tab is-dense is-segmented">
    <a class="item">實際效果</a>
    <a class="item is-active">預覽</a>
</div>
更高的

讓分頁項目有更高的上下內距,在某些樣式下會使項目文字距離指示器更遠。

<div class="ts-tab">
    <a class="item is-active">閒聊</a>
    <a class="item">同人</a>
    <a class="item">官方</a>
</div>
<div class="ts-tab is-tall">
    <a class="item is-active">閒聊</a>
    <a class="item">同人</a>
    <a class="item">官方</a>
</div>
組合應用
分頁內容

擺放在某些區塊的上方,可以就像真的在進行分頁切換一樣。

早安,我的朋友!
<div class="ts-box">
    <div class="ts-content is-fitted is-secondary">
        <div class="ts-tab">
            <a class="item">音樂</a>
            <a class="item is-active">貼文</a>
            <a class="item">影片</a>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content">
        早安,我的朋友!
    </div>
</div>
切換面板

片段分頁籤和表格放置在一起,可以用來切換項目的檢視狀態。

名稱 數量 金額
磁力共振掃描 1 $ 40,222
電腦斷層掃描 1 $ 20,000
正電子發射斷層掃描 1 $ 31,000
<div class="ts-box">
    <div class="ts-content is-dense">
        <div class="ts-grid">
            <div class="column is-fluid">
                <div class="ts-tab is-segmented">
                    <a class="item">項目</a>
                    <a class="item is-active">分類</a>
                </div>
            </div>
            <div class="column">
                <button class="ts-button is-outlined is-short is-end-icon">
                    編輯
                    <span class="ts-icon is-pen-to-square-icon"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <table class="ts-table">
        <thead>
            <tr>
                <th>名稱</th>
                <th class="is-end-aligned">數量</th>
                <th class="is-end-aligned">金額</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>磁力共振掃描</td>
                <td class="is-end-aligned">1</td>
                <td class="is-end-aligned">$ 40,222</td>
            </tr>
            <tr>
                <td>電腦斷層掃描</td>
                <td class="is-end-aligned">1</td>
                <td class="is-end-aligned">$ 20,000</td>
            </tr>
            <tr>
                <td>正電子發射斷層掃描</td>
                <td class="is-end-aligned">1</td>
                <td class="is-end-aligned">$ 31,000</td>
            </tr>
        </tbody>
    </table>
</div>
JavaScript 功能

點擊帶有 [data-tab] 屬性的按鈕可以切換對應 [id] 的元素。

這是「轉帳」頁面。
這是「紀錄」頁面。
<div class="ts-box">
    <div class="ts-tab">
        <button class="item" data-tab="tab-transfer">
            轉帳
        </button>
        <button class="item is-active" data-tab="tab-activities">
            紀錄
        </button>
        <button class="item" disabled>
            停用項目
        </button>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content" id="tab-transfer">
        這是「轉帳」頁面。
    </div>
    <div class="ts-content" id="tab-activities">
        這是「紀錄」頁面。
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標