sayfalandırma
Birden çok sayfada bir dizi ilgili içeriğin bulunduğunu belirtmek için sayfalandırmayı gösteren belgeler ve örnekler.
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">«</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>
</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 <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" aria-current="page">
<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>boyutlandırma
Daha büyük veya daha küçük sayfalandırma mı istiyorsunuz? 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 class="sr-only">(current)</span>
</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 class="sr-only">(current)</span>
</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>