分页组件（Pagination）

响应迅速、可用且灵活的分页

1

分页组件由几个元素组成：

  • pagination-previous and pagination-next “上一页”和“下一页”
  • pagination-list 显示页面项目的分页列表：
    • pagination-link 页码的分页链接
    • pagination-ellipsis 范围分隔符的分页省略号

所有元素都是可选的，因此您可以根据需要编写分页。

Example

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">&hellip;</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">&hellip;</span>
      </li>
      <li>
        <a class="pagination-link" aria-label="Goto page 86">86</a>
      </li>
    </ul>
  </nav>

如果某些链接处于非活动状态，您可以禁用它们，或者更改可用页码的数量。

Example

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修饰符来更改这些元素的顺序。

Example

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">&hellip;</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">&hellip;</span></li>
      <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
    </ul>
  </nav>

Example

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">&hellip;</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">&hellip;</span></li>
      <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
    </ul>
  </nav>

样式 #

添加is-rounded修饰符以使分页项为圆形。

Example

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">&hellip;</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">&hellip;</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 附加到分页组件。

Example

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">&hellip;</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">&hellip;</span></li>
      <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
    </ul>
  </nav>

Example

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">&hellip;</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">&hellip;</span></li>
      <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
    </ul>
  </nav>

Example

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">&hellip;</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">&hellip;</span></li>
      <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
    </ul>
  </nav>

变量 #

Name
Type
Value
Computed Value
Computed Type 
$pagination-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$pagination-border-color
variable
$border
hsl(0, 0%, 86%)
color
$pagination-margin
size
-0.25rem
$pagination-min-width
variable
$control-height
$pagination-item-font-size
size
1em
$pagination-item-margin
size
0.25rem
$pagination-item-padding-left
size
0.5em
$pagination-item-padding-right
size
0.5em
$pagination-nav-padding-left
size
0.75em
$pagination-nav-padding-right
size
0.75em
$pagination-hover-color
variable
$link-hover
hsl(0, 0%, 21%)
color
$pagination-hover-border-color
variable
$link-hover-border
hsl(0, 0%, 71%)
color
$pagination-focus-color
variable
$link-focus
hsl(0, 0%, 21%)
color
$pagination-focus-border-color
variable
$link-focus-border
hsl(229, 53%,  53%)
color
$pagination-active-color
variable
$link-active
hsl(0, 0%, 21%)
color
$pagination-active-border-color
variable
$link-active-border
hsl(0, 0%, 29%)
color
$pagination-disabled-color
variable
$text-light
hsl(0, 0%, 48%)
color
$pagination-disabled-background-color
variable
$border
hsl(0, 0%, 86%)
color
$pagination-disabled-border-color
variable
$border
hsl(0, 0%, 86%)
color
$pagination-current-color
variable
$link-invert
#fff
color
$pagination-current-background-color
variable
$link
hsl(229, 53%,  53%)
color
$pagination-current-border-color
variable
$link
hsl(229, 53%,  53%)
color
$pagination-ellipsis-color
variable
$grey-light
hsl(0, 0%, 71%)
color
$pagination-shadow-inset
size
inset 0 1px 2px rgba($scheme-invert, 0.2)

返回头部

23222

问题反馈
返回顶部