分页组件由几个元素组成:
-
pagination-previous
andpagination-next
“上一页”和“下一页” -
pagination-list
显示页面项目的分页列表:-
pagination-link
页码的分页链接 -
pagination-ellipsis
范围分隔符的分页省略号
-
所有元素都是可选的,因此您可以根据需要编写分页。
分页组件(Pagination)
响应迅速、可用且灵活的分页
分页组件由几个元素组成:
pagination-previous
and pagination-next
“上一页”和“下一页”
pagination-list
显示页面项目的分页列表:
pagination-link
页码的分页链接
pagination-ellipsis
范围分隔符的分页省略号
所有元素都是可选的,因此您可以根据需要编写分页。
HTML
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link" aria-label="Goto page 1">1</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">86</a>
</li>
</ul>
</nav>
如果某些链接处于非活动状态,您可以禁用它们,或者更改可用页码的数量。
HTML
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" title="This is the first page" disabled>Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 3">3</a>
</li>
</ul>
</nav>
默认情况下,在tablet上,列表位于左侧,上一个/下一个按钮位于右侧。但是可以通过使用is-centered
和is-right
修饰符来更改这些元素的顺序。
HTML
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
HTML
<nav class="pagination is-right" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
添加is-rounded
修饰符以使分页项为圆形。
HTML
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
分页有3种附加尺寸。
您只需要将修饰符is-small
, is-medium
, r is-large
附加到分页组件。
HTML
<nav class="pagination is-small" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
HTML
<nav class="pagination is-medium" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
HTML
<nav class="pagination is-large" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
$pagination-color
$text-strong
hsl(0, 0%, 21%)
$pagination-border-color
$border
hsl(0, 0%, 86%)
$pagination-margin
-0.25rem
$pagination-min-width
$control-height
$pagination-item-font-size
1em
$pagination-item-margin
0.25rem
$pagination-item-padding-left
0.5em
$pagination-item-padding-right
0.5em
$pagination-nav-padding-left
0.75em
$pagination-nav-padding-right
0.75em
$pagination-hover-color
$link-hover
hsl(0, 0%, 21%)
$pagination-hover-border-color
$link-hover-border
hsl(0, 0%, 71%)
$pagination-focus-color
$link-focus
hsl(0, 0%, 21%)
$pagination-focus-border-color
$link-focus-border
hsl(229, 53%, 53%)
$pagination-active-color
$link-active
hsl(0, 0%, 21%)
$pagination-active-border-color
$link-active-border
hsl(0, 0%, 29%)
$pagination-disabled-color
$text-light
hsl(0, 0%, 48%)
$pagination-disabled-background-color
$border
hsl(0, 0%, 86%)
$pagination-disabled-border-color
$border
hsl(0, 0%, 86%)
$pagination-current-color
$link-invert
#fff
$pagination-current-background-color
$link
hsl(229, 53%, 53%)
$pagination-current-border-color
$link
hsl(229, 53%, 53%)
$pagination-ellipsis-color
$grey-light
hsl(0, 0%, 71%)
$pagination-shadow-inset
inset 0 1px 2px rgba($scheme-invert, 0.2)