sayfalandırma
Birden çok sayfada bir dizi ilgili içeriğin bulunduğunu belirtmek için sayfalandırmayı gösteren belgeler ve örnekler.
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-label
iç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>
Bazı sayfalandırma bağlantıları için metin yerine bir simge veya simge mi kullanmak istiyorsunuz? aria
Öznitelikler ve yardımcı program ile uygun ekran okuyucu desteği sağladığınızdan emin olun .sr-only
.
<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">«</span>
<span class="sr-only">Previous</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Sayfalandırma bağlantıları farklı durumlar için özelleştirilebilir. .disabled
Tıklanamaz görünen bağlantılar ve .active
geçerli sayfayı belirtmek için kullanın .
.disabled
Sınıf , s'nin bağlantı işlevini devre dışı bırakmayı denemek için pointer-events: none
kullanı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">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></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">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</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>
Daha büyük veya daha küçük sayfalama ister misiniz? Ekle .pagination-lg
veya .pagination-sm
ek boyutlar için.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
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">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">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>