頁數導覽列

供前、後換頁或是頁數跳轉的導覽元件。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
1 2 3 4
<div class="ts-pagination">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item">4</a>
    <a class="item is-next"></a>
</div>
狀態
啟用的

表示目前檢視的頁數。

1 2 3
<div class="ts-pagination">
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
</div>
停用的

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

1 2 3 下一頁
<div class="ts-pagination">
    <button class="item is-back" disabled>上一頁</button>
    <a class="item is-active">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
    <a class="item is-next is-disabled">下一頁</a>
</div>
項目
上、下一頁

帶有前、後圖示的項目,能夠同時在裡面擺放文字。

<div class="ts-pagination">
    <a class="item is-back">上一頁</a>
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
    <a class="item is-next">下一頁</a>
</div>

帶有最新、最舊圖示的項目,能夠導引使用者到第一頁或最後一頁,能夠同時在裡面擺放文字。

<div class="ts-pagination">
    <a class="item is-first">最新</a>
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
    <a class="item is-last">最舊</a>
</div>
省略的

用省略符號表示某些頁數不重要,避免佔空間。

1 4 5 6 10
<div class="ts-pagination">
    <a class="item">1</a>
    <span class="item is-skipped"></span>
    <a class="item">4</a>
    <a class="item is-active">5</a>
    <a class="item">6</a>
    <span class="item is-skipped"></span>
    <a class="item">10</a>
</div>
外觀
次要的

讓整個導覽列沒那麼顯眼。

1 4 5 6 10
<div class="ts-pagination is-secondary">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-skipped"></a>
    <a class="item">4</a>
    <a class="item is-active">5</a>
    <a class="item">6</a>
    <a class="item is-skipped"></a>
    <a class="item">10</a>
    <a class="item is-next"></a>
</div>
外框線的

以外框線襯托每個頁數項目。

1 2 3
<div class="ts-pagination is-outlined">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
流動的

令整個頁數導覽列和父容器有相同的寬度。

1 2 3
<div class="ts-pagination is-fluid">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
尺寸

更改頁數導覽列的大小。

1 2 3
1 2 3
1 2 3
<div class="ts-pagination is-small">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
<div class="ts-pagination">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
<div class="ts-pagination is-large">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
寬鬆的

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

1 2 3
1 2 3
<div class="ts-pagination is-outlined">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
<div class="ts-pagination is-outlined is-relaxed">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
較密的

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

1 2 3
<div class="ts-pagination is-dense">
    <a class="item is-back"></a>
    <a class="item">1</a>
    <a class="item is-active">2</a>
    <a class="item">3</a>
    <a class="item is-next"></a>
</div>
組合應用
詳細分頁列

在資料的上、下方通常會有一個換頁用的導覽列,有時會包含筆數資訊。

醫院種類 名稱
醫學藥品 2021/08/01
常規心電圖 2021/08/01
單頁筆數:
1 4 5 6 10
<div class="ts-box">
    <table class="ts-table is-basic">
        <thead>
            <tr>
                <th>醫院種類</th>
                <th>名稱</th>
                <th class="is-collapsed">建立於</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="is-collapsed">東京 AH 綜合醫院</td>
                <td>醫學藥品</td>
                <td>2021/08/01</td>
            </tr>
            <tr>
                <td class="is-collapsed">東京 AH 綜合醫院</td>
                <td>常規心電圖</td>
                <td>2021/08/01</td>
            </tr>
        </tbody>
    </table>
    <div class="ts-divider"></div>
    <div class="ts-content is-dense is-secondary">
        <div class="ts-grid is-compact is-middle-aligned">
            <div class="column is-fluid">
                單頁筆數:
                <div class="ts-select is-basic">
                    <select>
                        <option>10</option>
                        <option>20</option>
                        <option selected>30</option>
                    </select>
                </div>
            </div>
            <div class="column">
                <div class="ts-pagination is-secondary">
                    <a class="item is-back"></a>
                    <a class="item">1</a>
                    <a class="item is-skipped"></a>
                    <a class="item">4</a>
                    <a class="item is-active">5</a>
                    <a class="item">6</a>
                    <a class="item is-skipped"></a>
                    <a class="item">10</a>
                    <a class="item is-next"></a>
                </div>
            </div>
        </div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標