分頁

分頁是一種導覽，讓使用者可以按一下搜尋結果、產品或其他相關項目的頁面。

基礎

分頁清單只是一個具有類別 .pagination 的 <ul>，以及一系列 <li>/<a> 配對。將類別 .current 加入 <li> 以標記目前頁面，或將 .disabled 加入連結以加入停用樣式。

請注意，清單會嵌套在具有屬性 aria-label="Pagination" 的 <nav> 內。這會向輔助技術說明元件的用途。

也應該將額外的螢幕閱讀器專用文字加入分頁元素。在以下範例中，閱讀頁面的使用者只會看到「下一頁」和「上一頁」，但螢幕閱讀器會將其讀成「下一頁」和「上一頁」。此外，目前頁面的文字會讀成「您在第一頁」。

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
  </ul>
</nav>

置中

分頁清單中的項目為 display: inline-block，這使得置中它們變得容易。使用我們內建的 .text-center 類別，或在您的 CSS 中加入 text-align: center。

在影片中觀看這部分

<nav aria-label="Pagination">
  <ul class="pagination text-center">
    <li class="pagination-previous disabled">Previous</li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Sass 參考

變數

這個元件的預設樣式可以使用這些 Sass 變數在專案的設定檔中自訂。

名稱	類型	預設值	說明
`$pagination-font-size`	數字	`rem-calc(14)`	分頁項目字體大小。
`$pagination-margin-bottom`	數字	`$global-margin`	分頁物件的預設下邊距。
`$pagination-item-color`	顏色	`$black`	分頁項目文字顏色。
`$pagination-item-padding`	數字	`rem-calc(3 10)`	分頁項目內的內距。
`$pagination-item-spacing`	數字	`rem-calc(1)`	分隔分頁項目的右邊距。
`$pagination-radius`	數字	`$global-radius`	分頁項目的預設半徑。
`$pagination-item-background-hover`	顏色	`$light-gray`	分頁項目滑鼠移入時的背景顏色。
`$pagination-item-background-current`	顏色	`$primary-color`	目前頁面分頁項目的背景顏色。
`$pagination-item-color-current`	顏色	`$white`	目前頁面分頁項目的文字顏色。
`$pagination-item-color-disabled`	顏色	`$medium-gray`	已停用分頁項目的文字顏色。
`$pagination-ellipsis-color`	顏色	`$black`	分頁選單中省略號的顏色。
`$pagination-mobile-items`	布林值	`false`	如果為 `false`，則不要在行動裝置上顯示頁碼連結，僅顯示下一頁/上一頁連結，以及目前頁碼（如果需要）。
`$pagination-mobile-current-item`	布林值	`false`	如果為 `true`，則在行動裝置上顯示目前頁碼，即使 `$pagination-mobile-items` 設為 `false`。這個參數僅會覆寫 `$pagination-mobile-items: false;` 的目前項目可見度設定，當 `$pagination-mobile-items` 設為 `true` 時，它不會影響目前頁碼的可見度。
`$pagination-arrows`	布林值	`true`	如果為 `true`，則會在分頁的下一頁和上一頁連結中加入箭頭。
`$pagination-arrow-previous`	字串	`'\00AB'`	當 `$pagination-arrows` 為 `true` 時，上一頁箭頭的內容
`$pagination-arrow-next`	字串	`'\00BB'`	當 `$pagination-arrows` 為 `true` 時，下一支箭頭的內容

混入

我們使用這些混入來建構此元件的最終 CSS 輸出。您可以自行使用混入來從我們的元件建構自己的類別結構。

pagination-container

@include pagination-container;

加入分頁容器的樣式。將此套用至 <ul>。

pagination-item-current

@include pagination-item-current;

加入目前分頁項目樣式。將此套用至 <a>。

pagination-item-disabled

@include pagination-item-disabled;

加入已停用分頁項目樣式。將此套用至 <a>。

pagination-ellipsis

@include pagination-ellipsis;

加入省略符號樣式，以用於分頁清單中。