مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

صفحہ بندی

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

اس صفحہ پر

جائزہ

ہم اپنے صفحہ بندی کے لیے جڑے ہوئے لنکس کا ایک بڑا بلاک استعمال کرتے ہیں، جس سے لنکس کو کھونا مشکل اور آسانی سے توسیع پذیر ہو جاتا ہے۔ صفحہ بندی فہرست HTML عناصر کے ساتھ بنائی گئی ہے تاکہ اسکرین ریڈرز دستیاب لنکس کی تعداد کا اعلان کر سکیں۔ <nav>اسکرین ریڈرز اور دیگر معاون ٹیکنالوجیز کے لیے نیویگیشن سیکشن کے طور پر شناخت کرنے کے لیے ریپنگ عنصر کا استعمال کریں ۔

اس کے علاوہ، جیسا کہ صفحات میں ممکنہ طور پر اس طرح کے ایک سے زیادہ نیویگیشن حصے ہوتے ہیں، اس لیے مناسب ہے کہ اس کے مقصد کی عکاسی کرنے aria-labelکے لیے وضاحتی فراہم کریں۔ <nav>مثال کے طور پر، اگر صفحہ بندی کا جزو تلاش کے نتائج کے ایک سیٹ کے درمیان نیویگیٹ کرنے کے لیے استعمال کیا جاتا ہے، تو ایک مناسب لیبل ہو سکتا ہے aria-label="Search results pages"۔

html 
<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اوصاف کے ساتھ مناسب سکرین ریڈر سپورٹ فراہم کرنا یقینی بنائیں ۔

html 
<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>
      </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>
      </a>
    </li>
  </ul>
</nav>

معذور اور فعال ریاستیں۔

صفحہ بندی کے لنکس مختلف حالات کے لیے حسب ضرورت ہیں۔ ان لنکس کے لیے استعمال کریں .disabledجو غیر کلک کرنے کے قابل دکھائی دیتے ہیں اور .activeموجودہ صفحہ کی نشاندہی کرنے کے لیے۔

جب کہ .disabledکلاس s کی لنک کی فعالیت کو غیر فعال کرنے کی کوشش کرتی ہے pointer-events: none، وہ<a> CSS پراپرٹی ابھی تک معیاری نہیں ہے اور کی بورڈ نیویگیشن کا حساب نہیں رکھتی ہے۔ اس طرح، آپ کو ہمیشہ tabindex="-1"غیر فعال لنکس کو شامل کرنا چاہیے اور ان کی فعالیت کو مکمل طور پر غیر فعال کرنے کے لیے حسب ضرورت JavaScript استعمال کرنا چاہیے۔

html 
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">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</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>، یا پچھلے/اگلے تیر کے معاملے میں اینکر کو چھوڑ سکتے ہیں، تاکہ کلک کی فعالیت کو ہٹایا جا سکے اور مطلوبہ انداز کو برقرار رکھتے ہوئے کی بورڈ فوکس کو روکا جا سکے۔

html 
<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>
    </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اضافی سائز کے لیے۔

html 
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</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>
html 
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</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>

سیدھ

flexbox کی افادیت کے ساتھ صفحہ بندی کے اجزاء کی سیدھ کو تبدیل کریں ۔ مثال کے طور پر، کے ساتھ .justify-content-center:

html 
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">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>

یا اس کے ساتھ .justify-content-end:

html 
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">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>

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیرات کے نقطہ نظر کے حصے کے طور پر، صفحہ بندی اب مقامی CSS متغیرات .paginationکو بہتر ریئل ٹائم حسب ضرورت کے لیے استعمال کرتی ہے۔ CSS متغیرات کی قدریں Sass کے ذریعے سیٹ کی جاتی ہیں، اس لیے Sass حسب ضرورت اب بھی تعاون یافتہ ہے۔

  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass متغیرات

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           ($pagination-border-width * -1);
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

ساس مکسنس

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}