Source

لاپەڕەسازی

بەڵگەنامە و نموونە بۆ نیشاندانی لاپەڕەسازی بۆ ئاماژەدان بە زنجیرەیەک ناوەڕۆکی پەیوەندیدار لە سەرانسەری چەندین لاپەڕەدا بوونی هەیە.

تێڕوانینێکی گشتی

ئێمە بلۆکێکی گەورەی بەستەری بەستراو بۆ لاپەڕەسازیمان بەکاردەهێنین، وا دەکات بەستەرەکان لەدەست بدرێن و بە ئاسانی گەورە بکرێت- هەموو ئەمانە لە هەمان کاتدا ناوچەی گەورەی لێدان دابین دەکەین. لاپەڕەسازی بە توخمەکانی 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بۆ هەوڵدان بۆ لەکارخستنی کارایی بەستەرەکانی <a>s، ئەو تایبەتمەندییە 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>

ڕێکخستن

گۆڕینی ڕێکخستنی پێکهاتەکانی لاپەڕەکردن بە سوودمەندییەکانی 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>