Phân trang

Tài liệu và ví dụ để hiển thị phân trang để chỉ ra một loạt nội dung có liên quan tồn tại trên nhiều trang.

Trên trang này

Tổng quan

Chúng tôi sử dụng một khối lớn các liên kết được kết nối cho việc phân trang của mình, làm cho các liên kết khó bị bỏ lỡ và dễ dàng mở rộng — tất cả đồng thời cung cấp các khu vực truy cập lớn. Phân trang được xây dựng với các phần tử HTML danh sách để trình đọc màn hình có thể thông báo số lượng liên kết có sẵn. Sử dụng phần tử gói <nav>để xác định nó như một phần điều hướng đến trình đọc màn hình và các công nghệ hỗ trợ khác.

Ngoài ra, vì các trang có thể có nhiều hơn một phần điều hướng như vậy, bạn nên cung cấp mô tả aria-labelđể phần này <nav>phản ánh mục đích của nó. Ví dụ: nếu thành phần phân trang được sử dụng để điều hướng giữa một tập hợp các kết quả tìm kiếm, thì một nhãn thích hợp có thể là aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Làm việc với các biểu tượng

Tìm cách sử dụng một biểu tượng hoặc biểu tượng thay cho văn bản cho một số liên kết phân trang? Đảm bảo cung cấp hỗ trợ trình đọc màn hình thích hợp với ariacác thuộc tính.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Trạng thái đã tắt và đang hoạt động

Các liên kết phân trang có thể tùy chỉnh cho các trường hợp khác nhau. Sử dụng .disabledcho các liên kết xuất hiện không thể nhấp được và .activeđể chỉ ra trang hiện tại.

Trong khi .disabledlớp sử dụng pointer-events: noneđể cố gắng vô hiệu hóa chức năng liên kết của <a>s, thuộc tính CSS đó vẫn chưa được tiêu chuẩn hóa và không tính đến điều hướng bàn phím. Do đó, bạn phải luôn thêm tabindex="-1"các liên kết bị vô hiệu hóa và sử dụng JavaScript tùy chỉnh để vô hiệu hóa hoàn toàn chức năng của chúng.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Bạn có thể tùy ý hoán đổi các neo đang hoạt động hoặc bị vô hiệu hóa cho <span>hoặc bỏ qua neo trong trường hợp mũi tên trước / sau, để loại bỏ chức năng nhấp chuột và ngăn chặn tiêu điểm bàn phím trong khi vẫn giữ lại các kiểu đã định.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Định cỡ

Phân trang lớn hơn hay nhỏ hơn lạ mắt? Thêm .pagination-lghoặc .pagination-smcho các kích thước bổ sung.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Căn chỉnh

Thay đổi sự liên kết của các thành phần phân trang bằng các tiện ích flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Sass

Biến

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-width:           $border-width;
$pagination-border-radius:          $border-radius;
$pagination-margin-start:           -$pagination-border-width;
$pagination-border-color:           $gray-300;

$pagination-focus-color:            $link-hover-color;
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            $link-hover-color;
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Mixin

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  .page-link {
    padding: $padding-y $padding-x;
    @include font-size($font-size);
  }

  .page-item {
    @if $pagination-margin-start == (-$pagination-border-width) {
      &:first-child {
        .page-link {
          @include border-start-radius($border-radius);
        }
      }

      &:last-child {
        .page-link {
          @include border-end-radius($border-radius);
        }
      }
    } @else {
      //Add border-radius to all pageLinks in case they have left margin
      .page-link {
        @include border-radius($border-radius);
      }
    }
  }
}