صفحو

دستاويز ۽ مثال صفحو ڏيکارڻ لاءِ ظاهر ڪرڻ لاءِ ته لاڳاپيل مواد جو هڪ سلسلو ڪيترن ئي صفحن تي موجود آهي.

اوسر

اسان استعمال ڪريون ٿا ڳنڍيل لنڪن جو هڪ وڏو بلاڪ اسان جي صفحي جي ترتيب لاءِ، ڳنڍڻ کي مشڪل بنائڻ ۽ آسانيءَ سان اسپيبلبل ٺاهڻ- سڀ ڪجهه جڏهن ته وڏا هٽ علائقا مهيا ڪري رهيا آهيون. صفحو لسٽ 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>

icons سان ڪم

ڪجهه صفحي جي لنڪ لاءِ ٽيڪسٽ جي جاءِ تي هڪ آئڪن يا علامت استعمال ڪرڻ چاهيو ٿا؟ 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ڪلاس s جي لنڪ ڪارڪردگيءَ کي بند ڪرڻ جي pointer-events: noneڪوشش ڪري<a> ٿو، ته CSS ملڪيت اڃا معياري نه آهي ۽ ڪيبورڊ نيويگيشن جو حساب نه ٿو رکي. جيئن ته، توهان کي هميشه 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>

ترتيب ڏيڻ

فلڪس باڪس يوٽيلٽيز سان صفحو سازي جي اجزاء جي ترتيب کي تبديل ڪريو .

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