Pagination

ເອກະສານແລະຕົວຢ່າງສໍາລັບການສະແດງ pagination ເພື່ອຊີ້ບອກຊຸດຂອງເນື້ອຫາທີ່ກ່ຽວຂ້ອງມີຢູ່ໃນຫຼາຍຫນ້າ.

ພາບລວມ

ພວກເຮົາໃຊ້ຕົວເຊື່ອມຕໍ່ອັນໃຫຍ່ຫຼວງສໍາລັບການສ້າງຫນ້າຂອງພວກເຮົາ, ເຮັດໃຫ້ການເຊື່ອມຕໍ່ທີ່ຍາກທີ່ຈະພາດແລະຂະຫຍາຍໄດ້ງ່າຍ - ທັງຫມົດໃນຂະນະທີ່ສະຫນອງພື້ນທີ່ຂະຫນາດໃຫຍ່. Pagination ຖືກສ້າງຂຶ້ນດ້ວຍອົງປະກອບ 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>

ເຮັດວຽກກັບໄອຄອນ

ຊອກຫາການນໍາໃຊ້ໄອຄອນຫຼືສັນຍາລັກແທນຂໍ້ຄວາມສໍາລັບບາງການເຊື່ອມຕໍ່ pagination? ໃຫ້ແນ່ໃຈວ່າສະຫນອງການສະຫນັບສະຫນູນເຄື່ອງອ່ານຫນ້າຈໍທີ່ເຫມາະສົມກັບ 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>

ສະຖານະທີ່ພິການ ແລະເຄື່ອນໄຫວ

ການເຊື່ອມຕໍ່ Pagination ແມ່ນສາມາດປັບແຕ່ງໄດ້ສໍາລັບສະຖານະການທີ່ແຕກຕ່າງກັນ. ໃຊ້ .disabledສໍາລັບການເຊື່ອມຕໍ່ທີ່ປາກົດວ່າບໍ່ສາມາດຄລິກໄດ້ແລະ .activeຊີ້ບອກຫນ້າປະຈຸບັນ.

ໃນຂະນະທີ່ .disabledຫ້ອງຮຽນໃຊ້ pointer-events: noneເພື່ອ ພະຍາຍາມ ປິດການທໍາງານຂອງການເຊື່ອມຕໍ່ຂອງ <a>s, ຄຸນສົມບັດ 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 ໃຫຍ່ຫຼືນ້ອຍກວ່າ? ເພີ່ມ .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>

ຈັດຮຽງ

ປ່ຽນການຈັດຮຽງຂອງອົງປະກອບ pagination ດ້ວຍ flexbox utilities .

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