Foundation-ページネーションSASSリファレンス

変数

表にリストされている次のSASS変数を使用して、コンポーネントのスタイルを変更できます。

Sr.No.	Name & Description	Type	Default Value
1	$pagination-font-size ページネーションのフォントサイズを設定します。	Number	rem-calc(14)
2	$pagination-margin-bottom メディアオブジェクトの下部にデフォルトのマージンを設定します。	Number	$global-margin
3	$pagination-item-color ページネーション項目のテキストの色を設定します。	Color	$black
4	$pagination-item-padding ページネーション項目内のパディングを設定します。	Number	rem-calc(3 10)
5	$pagination-item-spacing ページネーション項目のスペースを維持するために、マージンを右に設定します。	Number	rem-calc(1)
6	$pagination-radius デフォルトの半径を設定します	Number	$global-radius
7	$pagination-item-background-hover ホバーに背景色を設定します。	Color	$light-gray
8	$pagination-item-background-current ページネーション項目の現在のページの背景色を設定します。	Color	$primary-color
9	$pagination-item-color-current 現在のページのテキストの色を設定します。	Color	foreground($pagination-item-background-current)
10	$pagination-item-color-disabled 無効なページネーション項目のテキストの色を設定します。	Color	$medium-gray
11	$pagination-ellipsis-color 省略色を設定します。	Color	$black
12	$pagination-mobile-items モバイル画面に前/次ボタンのみを表示します。	Boolean	false
13	$pagination-arrows 矢印は、ページネーションの前後のリンクに含まれています。	Boolean	true

ミックスイン

ミックスインを使用して、表にリストされているコンポーネントのCSSクラス構造を構築できます。

ページネーションコンテナ

スタイルは、ページネーションコンテナに含まれています。 <ul>に適用されます

@include pagination-container;

ページネーション項目の現在

スタイルは現在のページネーション項目に含まれています。 <a>に適用されます

@include pagination-item-current;

ページネーションアイテム無効

無効なページネーションのスタイルが含まれています。 <a>に適用されます

@include pagination-item-disabled;

ページネーション省略記号

ページ区切りリストで使用する省略記号のスタイルが含まれています。

@include pagination-ellipsis;

Foundation-pagination-sass-reference