Pagination

分頁用於切換資料頁使用,使用類別名稱為 .pagi 並以此為子元件前綴詞。主要由 .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>

Span

用來當作裝飾用,類別名稱為 .pagi_span

1 11 12 13 20
<div class="pagi"> <a class="pagi_item">1</a> <span class="pagi_span"></span> <a class="pagi_item">11</a> <a class="pagi_item is:on">12</a> <a class="pagi_item">13</a> <span class="pagi_span"></span> <a class="pagi_item">20</a> </div>

Select

在小螢幕裝置上如果分頁過多會有排版上的問題,這時可使用 <select> 來收納頁分頁。在 <select> 加上 .pagi_select

<div class="pagi"> <a class="pagi_item"> <i class="icon fas fa-chevron-right"></i> </a> <select class="pagi_select"> <option value="1">1</select> <option value="2">2</select> <option value="3">3</select> </select> <a class="pagi_item"> <i class="icon fas fa-chevron-right"></i> </a> </div>

頁碼 / 總頁數

上一個範例提到可以使用 <select> 用於小螢幕裝置上。有時設計上或許會需要顯示當前頁碼與總頁數,這時可使用 .pagi_num 並且將 .pagi_select 放置在這。

1 / 3
<div class="pagi"> <a class="pagi_item"> <i class="icon fas fa-chevron-right"></i> </a> <div class="pagi_num"> 1 / 3 <i class="caret"></i> <select class="pagi_select"> <option value="1">1</select> <option value="2">2</select> <option value="3">3</select> </select> </div> <a class="pagi_item"> <i class="icon fas fa-chevron-right"></i> </a> </div>

Bordered & United

.pagi 加上 .:bordered 後,每個 .pagi_item 會有外框樣式。若要將每個 .pagi_item 緊接相鄰則另外加上 :united

<div class="pagi :bordered"></div>

對齊

Pagi 是由 Flex 方式排版,因此可以直接使用 Grid system 的對齊方式就能達成。

Center

Right

Justify
<div class="pagi f-align:c"></div> <div class="pagi f-align:r"></div> <div class="pagi f-align:j"></div>

最後來使用 Utilities 的類別來達成如何在不同螢幕大小做樣式切換。

3 / 10
<div class="pagi f-align:c"> <div class="pagi_nav [email protected]"> <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> <span class="pagi_item is:on">3</span> <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> </div> <div class="pagi_ctrls :bordered :united"> <a class="pagi_item"> <i class="icon fas fa-chevron-right"></i> </a> <div class="pagi_num [email protected]:n"> 1 / 3 <i class="caret"></i> <select class="pagi_select"> <option value="1">1</select> <option value="2">2</select> <option value="3">3</select> </select> </div> <a class="pagi_item"> <i class="icon fas fa-chevron-right"></i> </a> </div> </div>