Саҳифабандӣ

Ҳуҷҷатҳо ва мисолҳо барои нишон додани саҳифаҳо барои нишон додани як қатор мундариҷаи алоқаманд дар саҳифаҳои сершумор вуҷуд доранд.

Дар ин саҳифа

Барраси

Мо барои саҳифабандии худ як блоки калони истинодҳои пайвастшударо истифода мебарем, ки истинодҳоро аз даст додан душвор ва ба осонӣ миқёспазир мегардонад - ҳама дар ҳоле, ки минтақаҳои бузурги таъсирбахшро таъмин мекунанд. Саҳифабандӣ бо унсурҳои рӯйхати 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 ҳанӯз стандартизатсия нашудааст ва барои паймоиши клавиатура ҳисоб намекунад. Ҳамин тавр, шумо бояд ҳамеша истинодҳои ғайрифаъолро илова кунед ва JavaScript-и фармоиширо истифода баред, то кори онҳоро комилан ғайрифаъол созед.<a>tabindex="-1"

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

Шумо метавонед ба таври ихтиёрӣ лангарҳои фаъол ё ғайрифаъолро барои - иваз <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">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>

Сасс

Тағйирёбандаҳо

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