صفحہ بندی

متعدد صفحات پر متعلقہ مواد کی ایک سیریز کی نشاندہی کرنے کے لیے صفحہ بندی دکھانے کے لیے دستاویزات اور مثالیں۔

جائزہ

ہم اپنے صفحہ بندی کے لیے جڑے ہوئے لنکس کا ایک بڑا بلاک استعمال کرتے ہیں، جس سے لنکس کو کھونا مشکل اور آسانی سے توسیع پذیر ہو جاتا ہے۔ صفحہ بندی فہرست 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کلاس s کی لنک کی فعالیت کو غیر فعال کرنے کی کوشش کرتی ہے pointer-events: none، وہ<a> CSS پراپرٹی ابھی تک معیاری نہیں ہے اور کی بورڈ نیویگیشن کا حساب نہیں رکھتی ہے۔ اس طرح، آپ کو ہمیشہ tabindex="-1"غیر فعال لنکس کو شامل کرنا چاہیے اور ان کی فعالیت کو مکمل طور پر غیر فعال کرنے کے لیے حسب ضرورت JavaScript استعمال کرنا چاہیے۔

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