Source

ការបិទភ្ជាប់

ឯកសារ និងឧទាហរណ៍សម្រាប់បង្ហាញការសរសេរទំព័រ ដើម្បីបង្ហាញពីស៊េរីនៃមាតិកាដែលពាក់ព័ន្ធមាននៅទូទាំងទំព័រជាច្រើន។

ទិដ្ឋភាពទូទៅ

យើងប្រើប្លុកដ៏ធំនៃតំណភ្ជាប់ដែលបានភ្ជាប់សម្រាប់ការចូលទំព័ររបស់យើង ធ្វើឱ្យតំណភ្ជាប់ពិបាកនឹងខកខាន និងងាយស្រួលធ្វើមាត្រដ្ឋាន-ទាំងអស់ ខណៈពេលដែលផ្តល់នូវតំបន់ដែលពេញនិយម។ 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>

ធ្វើការជាមួយរូបតំណាង

ចង់ប្រើរូបតំណាង ឬនិមិត្តសញ្ញាជំនួសអត្ថបទសម្រាប់តំណទំព័រមួយចំនួន? ត្រូវប្រាកដថាផ្តល់ការគាំទ្រកម្មវិធីអានអេក្រង់ត្រឹមត្រូវជាមួយនឹង 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"លើតំណភ្ជាប់ដែលបិទ ហើយប្រើ 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-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 ។

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