පේජිනේෂන්

පිටු කිහිපයක් පුරා පවතින අදාළ අන්තර්ගත මාලාවක් දැක්වීමට පිටු සලකුණු පෙන්වීම සඳහා ලියකියවිලි සහ උදාහරණ.

දළ විශ්ලේෂණය

අපි අපගේ පිටු සැකසීම සඳහා සම්බන්ධිත සබැඳි විශාල ප්‍රමාණයක් භාවිතා කරන අතර, සබැඳි මඟ හැරීමට අපහසු වන අතර පහසුවෙන් පරිමාණය කළ හැකි-සියල්ල විශාල ප්‍රදේශ සපයන අතරම. පිටු සැකසීම ලැයිස්තුගත HTML මූලද්‍රව්‍ය සමඟ ගොඩනගා ඇති බැවින් තිර කියවන්නන්ට පවතින සබැඳි ගණන ප්‍රකාශ කළ හැක. <nav>තිර කියවන්නන් සහ අනෙකුත් සහායක තාක්ෂණයන් වෙත එය සංචාලන අංශයක් ලෙස හඳුනා ගැනීමට දවටන අංගයක් භාවිතා කරන්න .

මීට අමතරව, පිටුවල එවැනි සංචාලන අංශ එකකට වඩා ඇති බැවින්, එහි අරමුණ පිළිබිඹු කිරීම aria-labelසඳහා විස්තරයක් සැපයීම සුදුසුය. <nav>උදාහරණයක් ලෙස, සෙවුම් ප්‍රතිඵල සමූහයක් අතර සැරිසැරීමට pagination සංරචකය භාවිතා කරන්නේ නම්, සුදුසු ලේබලයක් විය හැක 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වත්මන් පිටුව දැක්වීමට භාවිතා කරන්න .

s හි සබැඳි ක්‍රියාකාරීත්වය අක්‍රිය කිරීමට පන්තිය .disabledභාවිතා pointer-events: noneකරන අතර , එම CSS ගුණය තවමත් ප්‍රමිතිගත කර නොමැති අතර යතුරුපුවරු සංචාලනය සඳහා ගණන් නොගනී . <a>එනිසා, ඔබ සැමවිටම 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 උපයෝගිතා සමඟින් pagination සංරචක පෙළගැස්වීම වෙනස් කරන්න .

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