Source

Sahifalar

Bir nechta sahifalarda bir qator tegishli kontent mavjudligini ko'rsatish uchun sahifalarni ko'rsatish uchun hujjatlar va misollar.

Umumiy koʻrinish

Biz sahifalash uchun bog'langan havolalarning katta blokidan foydalanamiz, bu havolalarni o'tkazib yuborishni qiyinlashtiradi va osonlik bilan kengaytiriladi - barchasi katta zarba joylarini ta'minlaydi. Sahifalar roʻyxat HTML elementlari bilan tuzilgan, shuning uchun ekran oʻquvchilari mavjud havolalar sonini eʼlon qilishlari mumkin. Oʻrash <nav>elementidan foydalanib, uni ekran oʻquvchilari va boshqa yordamchi texnologiyalar uchun navigatsiya boʻlimi sifatida aniqlang.

Bundan tashqari, sahifalarda bir nechta bunday navigatsiya bo'limlari bo'lishi mumkinligi sababli, uning maqsadini aks ettirish aria-labeluchun tavsifni taqdim etish tavsiya etiladi. <nav>Misol uchun, agar sahifalash komponenti qidiruv natijalari to'plami o'rtasida harakat qilish uchun ishlatilsa, tegishli yorliq bo'lishi mumkin 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>

Belgilar bilan ishlash

Ba'zi sahifalash havolalari uchun matn o'rniga belgi yoki belgidan foydalanmoqchimisiz? ariaAtributlar va yordamchi dastur bilan ekranni o'qishni to'g'ri qo'llab-quvvatlaganingizga ishonch hosil qiling .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">&laquo;</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">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

O'chirilgan va faol holatlar

Sahifalar havolalari turli holatlar uchun sozlanishi mumkin. .disabledBosish mumkin bo'lmagan havolalar uchun .activeva joriy sahifani ko'rsatish uchun foydalaning .

.disabledSinf s ning havola funksiyasini o'chirishga harakatpointer-events: none qilsa -da , bu CSS xususiyati hali standartlashtirilmagan va klaviatura navigatsiyasini hisobga olmaydi. Shunday qilib, siz doimo o'chirilgan havolalarni qo'shishingiz va ularning funksiyalarini to'liq o'chirish uchun maxsus JavaScript-dan foydalanishingiz kerak.<a>tabindex="-1"

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

Siz ixtiyoriy ravishda faol yoki o‘chirilgan langarlarni ga almashtirishingiz yoki <span>oldingi/keyingi o‘qlar holatida langarni tashlab qo‘yishingiz mumkin, bosish funksiyasini olib tashlash va mo‘ljallangan uslublarni saqlab qolgan holda klaviatura fokuslanishining oldini olish.

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

Hajmi

Kattaroq yoki kichikroq sahifalashni xohlaysizmi? Qo'shish .pagination-lgyoki .pagination-smqo'shimcha o'lchamlar uchun.

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

Hizalama

Flexbox yordam dasturlari bilan sahifalash komponentlarining hizalanishini o'zgartiring .

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