Pagination
分頁用於切換資料頁使用，使用類別名稱為 .pagi 並以此為子元件前綴詞。
Default
主要由 .pagi_item 構成，當頁標記的方式在該 .pagi_item 加上 .is:on。連結項目可用 <a>，不提供連結可用 <span>。pagi_item 可置入頁碼以及圖形或 Iconfont。以下為幾種基本使用情境：
<div class="pagi">
<span class="pagi_item is:on">1</span>
<a class="pagi_item">2</a>
<a class="pagi_item">3</a>
<a class="pagi_item">4</a>
</div>
可在第一個與最後一個項目加上 Icon 或圖形表示上一頁和下一頁。
<div class="pagi">
<a class="pagi_item">
<i class="icon fas fa-chevron-left"></i>
</a>
<a class="pagi_item">1</a>
<span class="pagi_item is:on">2</span>
<a class="pagi_item">3</a>
<a class="pagi_item">4</a>
<a class="pagi_item">
<i class="icon fas fa-chevron-right"></i>
</a>
</div>
也可只顯示當前頁面與上一頁和下一頁。
<div class="pagi">
<a class="pagi_item">
<i class="icon fas fa-chevron-left"></i>
</a>
<span class="pagi_item">5</span>
<a class="pagi_item">
<i class="icon fas fa-chevron-right"></i>
</a>
</div>
利用圖示做成控制列。
<div class="pagi">
<a class="pagi_item">
<i class="icon fas fa-step-backward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-backward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-forward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-step-forward"></i>
</a>
</div>
Span
用來當作裝飾用，類別名稱為 .pagi_span。
<div class="pagi">
<a class="pagi_item">
<i class="icon fas fa-chevron-left"></i>
</a>
<a class="pagi_item">1</a>
<span class="pagi_span">
<i class="icon fas fa-ellipsis-h"></i>
</span>
<a class="pagi_item">11</a>
<span class="pagi_item is:on">12</span>
<a class="pagi_item">13</a>
<span class="pagi_span">
<i class="icon fas fa-ellipsis-h"></i>
</span>
<a class="pagi_item">20</a>
<a class="pagi_item">
<i class="icon fas fa-chevron-right"></i>
</a>
</div>
Select
在小螢幕裝置上如果分頁過多會有排版上的問題，這時可使用 <select> 來收納頁分頁。在 <select> 加上 .pagi_select。
<div class="pagi">
<a class="pagi_item">
<i class="icon fas fa-chevron-left"></i>
</a>
<select class="pagi_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a class="pagi_item">
<i class="icon fas fa-chevron-right"></i>
</a>
</div>
頁碼 / 總頁數
上一個範例提到可以使用 <select> 用於小螢幕裝置上。有時設計上或許會需要顯示當前頁碼與總頁數，這時可使用 .pagi_num 並且將 .pagi_select 放置在這。
<div class="pagi">
<a class="pagi_item">
<i class="icon fas fa-chevron-left"></i>
</a>
<div class="pagi_num">
1 / 3
<i class="caret"></i>
<select class="pagi_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<a class="pagi_item">
<i class="icon fas fa-chevron-right"></i>
</a>
</div>
Bordered & United
在 .pagi 加上 .:bordered 後，每個 .pagi_item 會有外框樣式。
<div class="pagi :bordered">
<a class="pagi_item">
<i class="icon fas fa-step-backward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-backward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-forward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-step-forward"></i>
</a>
</div>
若要將每個 .pagi_item 緊接相鄰則另外加上 :united。
<div class="pagi :bordered :united">
<a class="pagi_item">
<i class="icon fas fa-step-backward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-backward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-forward"></i>
</a>
<a class="pagi_item">
<i class="icon fas fa-step-forward"></i>
</a>
</div>
對齊
Pagi 是由 Flex 方式排版，因此可以直接使用 Grid System Utilities 的對齊方式就能達成。
最後來使用 Utilities Display 的類別來達成如何在不同螢幕大小做樣式切換。
<div class="pagi f-align:c">
<nav class="pagi_nav u-dsp:n u-dsp@md">
<a class="pagi_item">1</a>
<span class="pagi_span">
<i class="icon fas fa-ellipsis-h"></i>
</span>
<a class="pagi_item">2</a>
<a class="pagi_item is:on">3</a>
<a class="pagi_item">4</a>
<span class="pagi_span">
<i class="icon fas fa-ellipsis-h"></i>
</span>
<a class="pagi_item">10</a>
</nav>
<div class="pagi_ctrls :bordered :united">
<a class="pagi_item">
<i class="icon fas fa-chevron-left"></i>
</a>
<div class="pagi_num u-dsp@md:n">
3 / 10 <i class="caret"></i>
<select class="pagi_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<a class="pagi_item">
<i class="icon fas fa-chevron-right"></i>
</a>
</div>
</div>