基礎 - 分頁 SASS 參考

變數

您可以使用以下 SASS 變數（如表中所列）更改元件的樣式。

序號	名稱和描述	型別	預設值
1	$pagination-font-size 設定分頁的字型大小。	數字	rem-calc(14)
2	$pagination-margin-bottom 設定媒體物件底部的預設邊距。	數字	$global-margin
3	$pagination-item-color 設定分頁項文字的顏色。	顏色	$black
4	$pagination-item-padding 設定分頁項內的填充。	數字	rem-calc(3 10)
5	$pagination-item-spacing 設定右側邊距以在分頁項中保留空間。	數字	rem-calc(1)
6	$pagination-radius 設定預設圓角	數字	$global-radius
7	$pagination-item-background-hover 設定懸停時的背景顏色。	顏色	$light-gray
8	$pagination-item-background-current 設定分頁項當前頁面的背景顏色。	顏色	$primary-color
9	$pagination-item-color-current 設定當前頁面的文字顏色。	顏色	foreground($pagination-item-background-current)
10	$pagination-item-color-disabled 設定停用分頁項的文字顏色。	顏色	$medium-gray
11	$pagination-ellipsis-color 設定省略號顏色。	顏色	$black
12	$pagination-mobile-items 在手機螢幕上僅顯示上一頁/下一頁按鈕。	布林值	false
13	$pagination-arrows 箭頭包含在分頁的上一頁和下一頁連結中。	布林值	true

您可以使用混合來構建元件的 CSS 類結構，如表中所列。

樣式包含在分頁容器中。它應用於 <ul>

@include pagination-container;

包含當前分頁項的樣式。它應用於 <a>

@include pagination-item-current;

包含停用分頁的樣式。它應用於 <a>

@include pagination-item-disabled;

包含用於在分頁列表中使用的省略號的樣式。

@include pagination-ellipsis;

foundation_navigation.htm

列印頁面