Пагінацыя

Дакументацыя і прыклады для паказу пагінацыі для пазначэння серыі звязанага кантэнту існуюць на некалькіх старонках.

На гэтай старонцы

Агляд

Мы выкарыстоўваем вялікі блок звязаных спасылак для нашай пагінацыі, што робіць спасылкі цяжка прапусціць і лёгка маштабуюцца - і ўсё гэта забяспечваючы вялікія вобласці траплення. Размяшчэнне старонак пабудавана з элементамі спісу HTML, каб праграмы чытання з экрана маглі паведамляць пра колькасць даступных спасылак. Выкарыстоўвайце <nav>элемент абгорткі, каб вызначыць яго як раздзел навігацыі для праграм чытання з экрана і іншых дапаможных тэхналогій.

Акрамя таго, паколькі старонкі, верагодна, маюць больш чым адзін такі раздзел навігацыі, пажадана даць апісанне aria-labelдля <nav>адлюстравання яго мэты. Напрыклад, калі кампанент пагінацыі выкарыстоўваецца для навігацыі паміж наборам вынікаў пошуку, адпаведнай пазнакай можа быць 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>

Праца са значкамі

Жадаеце выкарыстоўваць значок або сімвал замест тэксту для некаторых спасылак на пагінацыю? Не забудзьцеся забяспечыць належную падтрымку праграмы чытання з экрана з ariaатрыбутамі.

<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>

Адключаны і актыўны стану

Спасылкі на пагінацыю можна наладзіць для розных абставінаў. Выкарыстоўваецца .disabledдля спасылак, па якіх немагчыма націснуць, і .activeдля ўказання бягучай старонкі.

У той час як .disabledклас pointer-events: noneспрабуе адключыць функцыянальнасць спасылак s, гэта ўласцівасць CSS яшчэ<a> не стандартызавана і не ўлічвае навігацыю з клавіятуры. Такім чынам, вы заўсёды павінны дадаваць tabindex="-1"адключаныя спасылкі і выкарыстоўваць уласны JavaScript, каб цалкам адключыць іх функцыянальнасць.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Пры жаданні вы можаце замяніць актыўныя або адключаныя прывязкі на <span>, або апусціць прывязку ў выпадку стрэлак папярэдняга/наступнага, каб выдаліць функцыянальнасць націску і прадухіліць фокус клавіятуры, захаваўшы прызначаныя стылі.

<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>

Праклейванне

Хочаце пагінацыю большага ці меншага памеру? Дадайце .pagination-lgабо .pagination-smдля дадатковых памераў.

<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>

Выраўноўванне

Змяніце выраўноўванне кампанентаў пагінацыі з дапамогай утыліт flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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>

Сас

Пераменныя

$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 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);
      }
    }
  }
}