分頁籤 - Tocas UI

啟用的

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

<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>

透過屬性標籤控制

點擊帶有 [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>