ترقيم الصفحات

وثائق وأمثلة لإظهار ترقيم الصفحات للإشارة إلى وجود سلسلة من المحتويات ذات الصلة عبر صفحات متعددة.

ملخص

نحن نستخدم كتلة كبيرة من الروابط المتصلة من أجل ترقيم الصفحات ، مما يجعل الروابط صعبة الفقدان وقابلة للتطوير بسهولة — كل ذلك مع توفير مناطق وصول كبيرة. تم إنشاء ترقيم الصفحات باستخدام قائمة عناصر HTML بحيث يمكن لقارئات الشاشة الإعلان عن عدد الروابط المتاحة. استخدم <nav>عنصر التفاف لتعريفه على أنه قسم تنقل لقارئات الشاشة والتقنيات المساعدة الأخرى.

بالإضافة إلى ذلك ، نظرًا لأنه من المحتمل أن تحتوي الصفحات على أكثر من قسم تنقل واحد ، فمن المستحسن تقديم وصف وصفي aria-labelلـ <nav>ليعكس الغرض منه. على سبيل المثال ، إذا تم استخدام مكون ترقيم الصفحات للتنقل بين مجموعة من نتائج البحث ، فيمكن أن تكون التسمية المناسبة 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>

العمل مع الرموز

هل تبحث عن استخدام رمز أو رمز بدلاً من النص لبعض روابط ترقيم الصفحات؟ تأكد من تقديم دعم مناسب لقارئ الشاشة ariaبالسمات .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>

الدول المعوقة والنشطة

روابط ترقيم الصفحات قابلة للتخصيص لظروف مختلفة. استخدمه .disabledللارتباطات التي تبدو غير قابلة للنقر ولإشارة .activeإلى الصفحة الحالية.

بينما .disabledيستخدم الفصل لمحاولةpointer-events: none تعطيل وظيفة الارتباط الخاصة بـ s ، فإن خاصية CSS هذه لم يتم توحيدها بعد ولا تمثل التنقل باستخدام لوحة المفاتيح. على هذا النحو ، يجب عليك دائمًا إضافة الروابط المعطلة واستخدام JavaScript مخصص لتعطيل وظائفها بالكامل.<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>

يمكنك اختياريًا تبديل نقاط الارتساء النشطة أو المعطلة <span>، أو حذف المرساة في حالة الأسهم السابقة / التالية ، لإزالة وظيفة النقر ومنع تركيز لوحة المفاتيح مع الاحتفاظ بالأنماط المقصودة.

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

تحجيم

يتوهم ترقيم الصفحات أكبر أو أصغر؟ أضف .pagination-lgأو .pagination-smلأحجام إضافية.

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

محاذاة

قم بتغيير محاذاة مكونات ترقيم الصفحات باستخدام أدوات flexbox المساعدة .

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