Pagination - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

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>

States

Active

A pagination item can be active to indicate the current page.

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>

Disabled

A pagination item can be disabled. For hyperlinks, use the .is-disabled class.

1 2 3 Next

<div class="ts-pagination">
    <button class="item is-back" disabled>Previous</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">Next</a>
</div>

Item Variations

Previous and Next

A pagination item can have a previous or next icon with text.

Previous 1 2 3 Next

<div class="ts-pagination">
    <a class="item is-back">Previous</a>
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
    <a class="item is-next">Next</a>
</div>

First and Last

A pagination item can have a first or last icon with text.

Newest 1 2 3 Oldest

<div class="ts-pagination">
    <a class="item is-first">Newest</a>
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
    <a class="item is-last">Oldest</a>
</div>

Skipped

A pagination item can be skipped.

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>

Variations

Secondary

A pagination can be secondary to reduce its prominence.

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>

Outlined

A pagination can be outlined.

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>

Fluid

A pagination can be fluid to take up the full width of its container.

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>

Sizes

A pagination can vary in size.

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>

Relaxed

A pagination can be relaxed to increase the space between items.

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>

Dense

A pagination can be dense to reduce the height of each item.

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>

Compositions

Footer Pagination

A pagination menu can be used to navigate through a list of items.

Hospital	Particulars	Created At
Tokyo AH Hospital	Medical Supplies	2021/08/01
Tokyo AH Hospital	Standard ECG	2021/08/01

Rows per Page:

1 4 5 6 10

<div class="ts-box">
    <table class="ts-table is-basic">
        <thead>
            <tr>
                <th>Hospital</th>
                <th>Particulars</th>
                <th class="is-collapsed">Created At</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="is-collapsed">Tokyo AH Hospital</td>
                <td>Medical Supplies</td>
                <td>2021/08/01</td>
            </tr>
            <tr>
                <td class="is-collapsed">Tokyo AH Hospital</td>
                <td>Standard ECG</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">
                Rows per Page:
                <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>