Gezinme · Pagination

Sayfalama

Uzun bir listeyi sayfalara böler ve sayfalar arasında gezinmeyi sağlar.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<nav class="trds-sayfalama" aria-label="Sayfalama">
  <a class="trds-sayfalama__yon" href="#">Önceki</a>
  <a href="#">1</a>
  <a href="#" aria-current="page">2</a>
  <a href="#">3</a>
  <a class="trds-sayfalama__yon" href="#">Sonraki</a>
</nav>

Ne zaman kullanılır

Bir listede 20 satırdan çok kayıt varsa kullanın.
Bir hizmet akışında adım göstergesi kullanın, sayfalama kullanmayın.

Erişilebilirlik

<nav aria-label="Sayfalama"> içine alın.
Geçerli sayfa aria-current="page" taşır.
Her bağlantı 44 x 44 piksel dokunma alanına sahiptir.

Karşılanan WCAG 2.2 ölçütleri 2.4.8 2.5.8 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, NO.