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پۆلەکە بەکاردێت pointer-events: noneبۆ هەوڵدان بۆ لەکارخستنی کارایی بەستەرەکانی <a>s، ئەو تایبەتمەندییە CSS هێشتا ستاندارد نەکراوە و حساب بۆ گەشتکردنی کیبۆرد ناکات. بەم شێوەیە، پێویستە هەمیشە tabindex="-1"لەسەر بەستەری لەکارخراو زیاد بکەیت و جاڤاسکڕێپتی تایبەت بەکاربهێنیت بۆ ئەوەی بە تەواوی کاراییەکانیان لەکاربخەیت.

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>

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندووی Bootstrap، ئێستا لاپەڕەسازی گۆڕاوە ناوخۆییەکانی 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};

گۆڕاوەکانی ساس

$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};
}