Foundation - 分页 SASS 参考

变量

您可以使用表中列出的以下 SASS 变量更改组件的样式。

Sr.No.	名称和描述	类型	默认值
1	$pagination-font-size 设置分页的字体大小。	数字	rem-calc(14)
2	$pagination-margin-bottom 设置媒体对象底部的默认边距。	数字	$global-margin
3	$pagination-item-color 设置分页项文本的颜色。	Color	$black
4	$pagination-item-padding 设置分页项内的填充。	Number	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 在移动屏幕上仅显示上一个/下一个按钮。	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;