頁數導覽列 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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>

第一頁、最後頁

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

最新 1 2 3 最舊

<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

<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

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

組合應用

詳細分頁列

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

醫院種類	名稱	建立於
東京 AH 綜合醫院	醫學藥品	2021/08/01
東京 AH 綜合醫院	常規心電圖	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>