sayfalandırma

Birden çok sayfada bir dizi ilgili içeriğin bulunduğunu belirtmek için sayfalandırmayı gösteren belgeler ve örnekler.

Bu sayfada

genel bakış

Sayfalandırmamız için büyük bir bağlantılı bağlantı bloğu kullanıyoruz, bu da bağlantıların gözden kaçırılmasını zorlaştırıyor ve kolayca ölçeklenebilir hale getiriyor ve tüm bunları yaparken de geniş isabet alanları sağlıyoruz. Sayfalandırma, liste HTML öğeleriyle oluşturulmuştur, böylece ekran okuyucular mevcut bağlantıların sayısını bildirebilir. <nav>Okuyucuları ve diğer yardımcı teknolojileri taramak için bir gezinme bölümü olarak tanımlamak için bir sarma öğesi kullanın .

Ek olarak, sayfalarda bu tür birden fazla gezinme bölümü bulunduğundan, amacını yansıtması aria-labeliçin bir açıklayıcı sağlanması tavsiye edilir. <nav>Örneğin, sayfalandırma bileşeni bir dizi arama sonucu arasında gezinmek için kullanılıyorsa, uygun bir etiket olabilir 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>

Simgelerle çalışma

Bazı sayfalandırma bağlantıları için metin yerine bir simge veya simge mi kullanmak istiyorsunuz? ariaÖzniteliklerle uygun ekran okuyucu desteği sağladığınızdan emin olun .

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

Devre dışı ve aktif durumlar

Sayfalandırma bağlantıları farklı durumlar için özelleştirilebilir. .disabledTıklanamaz görünen bağlantılar ve .activegeçerli sayfayı belirtmek için kullanın .

.disabledSınıf , s'nin bağlantı işlevini devre dışı bırakmayı denemek için pointer-events: nonekullanırken , bu <a>CSS özelliği henüz standartlaştırılmamıştır ve klavye gezintisini hesaba katmaz. Bu nedenle, her zaman tabindex="-1"devre dışı bırakılmış bağlantılar eklemeli ve işlevlerini tamamen devre dışı bırakmak için özel JavaScript kullanmalısınız.

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

Tıklama işlevini kaldırmak ve istenen stilleri korurken klavye odağını önlemek için isteğe bağlı olarak etkin veya devre dışı bırakılmış bağlantıları değiştirebilir veya <span>önceki/sonraki okları durumunda bağlantıyı atlayabilirsiniz.

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

boyutlandırma

Daha büyük veya daha küçük sayfalama ister misiniz? Ekle .pagination-lgveya .pagination-smek boyutlar için.

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

hizalama

Sayfalandırma bileşenlerinin hizalamasını flexbox yardımcı programları ile değiştirin .

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

küstah

Değişkenler

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

karışımlar

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