Pagination

分頁用於切換資料頁使用,使用類別名稱為 .pagi 並以此為子元件前綴詞。

Default

主要由 .pagi_item 構成,當頁標記的方式在該 .pagi_item 加上 .is:on。連結項目可用 <a>,不提供連結可用 <span>pagi_item 可置入頁碼以及圖形或 Iconfont。以下為幾種基本使用情境:

1 2 3 4
<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 或圖形表示上一頁和下一頁。

1 2 3 4
<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>

也可只顯示當前頁面與上一頁和下一頁。

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

1 11 12 13 20
<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 放置在這。

1 / 3
<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 的對齊方式就能達成。

Center
5

Right
5

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

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

3 / 10
<div class="pagi f-align:c"> <nav class="pagi_nav u-dsp:n [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> <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 [email protected]: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>
右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.