លេខរៀងទំព័រ
ត្រូវបានប្រើដើម្បីបង្ហាញពីបញ្ជីលេខនៃទំព័រសម្រាប់អ្នកប្រើប្រាស់ ដូច្នេះអ្នកប្រើប្រាស់អាចស្វែងរកទំព័របន្ទាប់ ឬត្រឡប់ក្រោយបាន។
មានជាទូទៅ
ឧទាហរណ៍
ភ្ជាប់ជាមួយអក្សរនិងសញ្ញា
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i>មុន</a></li>
<li class="page-item active"><a class="page-link" href="#">១</a></li>
<li class="page-item"><a class="page-link" href="#">២</a></li>
<li class="page-item"><a class="page-link" href="#">៣</a></li>
<li class="page-item"><a class="page-link" href="#">៤</a></li>
<li class="page-item"><a class="page-link" href="#">៥</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">១២</a></li>
<li class="page-item"><a class="page-link" href="#">បន្ទាប់<i class="bi bi-chevron-right"></i></a></li>
</ul>
</nav>
ភ្ជាប់ជាមួយអក្សរ
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">មុន</a></li>
<li class="page-item active"><a class="page-link" href="#">១</a></li>
<li class="page-item"><a class="page-link" href="#">២</a></li>
<li class="page-item"><a class="page-link" href="#">៣</a></li>
<li class="page-item"><a class="page-link" href="#">៤</a></li>
<li class="page-item"><a class="page-link" href="#">៥</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">១២</a></li>
<li class="page-item"><a class="page-link" href="#">បន្ទាប់</a></li>
</ul>
</nav>
ភ្ជាប់ជាមួយសញ្ញាព្រួញ
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
<li class="page-item active"><a class="page-link" href="#">១</a></li>
<li class="page-item"><a class="page-link" href="#">២</a></li>
<li class="page-item"><a class="page-link" href="#">៣</a></li>
<li class="page-item"><a class="page-link" href="#">៤</a></li>
<li class="page-item"><a class="page-link" href="#">៥</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">១២</a></li>
<li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-right"></i></a></li>
</ul>
</nav>
ធាតុផ្សំ
- ប៊ូតុងមុន និង បន្ទាប់៖ អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់ថយក្រោយ ឬបញ្ជូនបន្តទំព័រមួយ, អាចជាអក្សរឬរូបតំណាង, អាចប្រើតែមួយប្រសិនបើគ្មានកន្លែងគ្រប់គ្រាន់។
- លេខរៀង៖ អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់រំលងទៅទំព័រផ្សេងៗបានគ្រប់ពេល។
- ការកាត់ចេញ៖ នៅពេលឈានដល់កម្រិតនៃទំព័រ បញ្ជីត្រូវបានកាត់បន្ថយដោយប្រើសញ្ញាចុច៣។
គម្លាត
នៅខាងក្នុងទំព័រ
ត្រូវប្រាកដថាមានគម្លាតបញ្ឈរ 8px និងគម្លាតផ្ដេក 16px។ កម្ពស់មូលដ្ឋាន 48px ។
គោលការណ៍ណែនាំនៃការប្រើប្រាស់
លេខរៀងទំព័រ គួរតែត្រូវបានប្រើនៅពេលដែល៖
- ខ្លឹមសារវែងអាចត្រូវបានបំបែកទៅជាទំព័រជាច្រើនដែលអាចស្វែងរកតាមលំដាប់លំដោយ ឬដោយជ្រើសរើសទំព័រជាក់លាក់មួយនៅក្នុងសំណុំទំព័រ។
លេខរៀងទំព័រ មិនគួរតែត្រូវបានប្រើនៅពេលដែល៖
- ទំព័រអាចអូសចុញក្រោមបានរហូតនិងគ្មានដែនកំណត់ ឧទាហរណ៍ ទំព័រNews Feed។
- ខ្លឹមសារឬព័ត៌មានមិនស្ថិតនៅក្នុងបរិបទ ឬប្រធានបទរួមតែមួយ។ ពិចារណាប្រើ របារខាងលើជំនួសវិញ។
- ការផ្លាស់ប្តូររវាងបទបង្ហាញ ឬខ្លឹមសារនៅក្នុង Carousels។
គោលការណ៍ណែនាំនៃការរចនា
បង្ហាញចំនួនទំព័រសរុប
អ្នកប្រើប្រាស់គួរតែដឹងពីចំនួនទំព័រ ឬធាតុសរុប។ ការកាត់ចេញអាចត្រូវបានប្រើនៅពេលដែលចំនួនទំព័រលើសពីដែនកំណត់បង្ហាញទំព័រ។
លើកឡើងពីទំព័រថ្មីៗ
លេខរៀងទំព័រ គួរតែរំលេចឡើងពីទំព័រដែលអ្នកប្រើប្រាស់កំពុងបើក។
លេខរៀងទំព័រត្រូវនៅផ្នែកខាងក្រោមនៃទំព័រ
ដើម្បីឱ្យអ្នកប្រើប្រាស់អាចស្វែងរករវាងទំព័រនីមួយៗបាន។
ខ្នាតសម្រាប់រចនា
$pagination-padding-y: 0.5rem !default;
$pagination-padding-x: 1rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-radius: $border-radius !default;
$pagination-margin-start: -$pagination-border-width !default;
$pagination-border-color: $border-color !default;
$pagination-focus-color: $link-hover-color !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $border-color !default;
$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
!default;
$pagination-border-radius-sm: $border-radius-sm !default;
$pagination-border-radius-lg: $border-radius-lg !default;