Pagination
Zolemba ndi zitsanzo zowonetsera zolemba zosonyeza mndandanda wazinthu zokhudzana nazo zilipo pamasamba angapo.
Mwachidule
Timagwiritsa ntchito maulalo ambiri olumikizidwa kumitundu yathu, zomwe zimapangitsa kuti maulalo akhale ovuta kuphonya komanso osavuta kuwonjeza-nthawi zonse ndikupereka madera akuluakulu. Pagination imapangidwa ndi mndandanda wazinthu za HTML kuti owerenga zenera athe kulengeza kuchuluka kwa maulalo omwe alipo. Gwiritsani ntchito <nav>
chinthu chomangirira kuti muzindikire ngati gawo loyang'ana powonera owerenga ndi matekinoloje ena othandizira.
Kuphatikiza apo, popeza masamba ali ndi magawo opitilira amodzi otere, ndibwino kuti mupereke zofotokozera aria-label
kuti <nav>
ziwonetse cholinga chake. Mwachitsanzo, ngati chigawo cha pagination chikugwiritsidwa ntchito poyang'ana pakati pa zotsatira zakusaka, chizindikiro choyenera chikhoza kukhala 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>
Kugwira ntchito ndi zithunzi
Mukuyang'ana kugwiritsa ntchito chithunzi kapena chizindikiro m'malo mwazolemba pamalumikizidwe amitundu? Onetsetsani kuti mukupereka chithandizo choyenera chowerengera chophimba ndi mawonekedwe aria
.
<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">«</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">»</span>
</a>
</li>
</ul>
</nav>
Mayiko olumala komanso ogwira ntchito
Maulalo a pagination amatha kusintha pamikhalidwe yosiyanasiyana. Gwiritsani .disabled
ntchito maulalo omwe akuwoneka ngati osadina .active
ndikuwonetsa tsamba lomwe lilipo.
Ngakhale .disabled
kalasiyo imagwiritsa ntchito pointer-events: none
kuyesa kuletsa ulalo wa <a>
s, katundu wa CSS sunakhazikitsidwebe ndipo samawerengera ma kiyibodi. Chifukwa chake, nthawi zonse muyenera kuwonjezera tabindex="-1"
pa maulalo olemala ndikugwiritsa ntchito JavaScript kuti mulepheretse magwiridwe ake.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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>
Mutha kusinthanso anangula omwe akugwira ntchito kapena olephereka a <span>
, kapena kusiya nangula ngati mivi yapitayi / yotsatira, kuti muchotse magwiridwe antchito ndikuletsa kuyang'ana kwa kiyibodi ndikusunga masitayelo omwe mukufuna.
<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" aria-current="page">
<span class="page-link">2</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>
Kukula
Mukufuna zokhala zazikulu kapena zazing'ono? Onjezani .pagination-lg
kapena .pagination-sm
ma size owonjezera.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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 active" aria-current="page">
<span class="page-link">1</span>
</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>
Kuyanjanitsa
Sinthani masanjidwe a zigawo zapagination ndi zida za 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" aria-disabled="true">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" aria-disabled="true">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>
Sass
Zosintha
$pagination-padding-y: .375rem;
$pagination-padding-x: .75rem;
$pagination-padding-y-sm: .25rem;
$pagination-padding-x-sm: .5rem;
$pagination-padding-y-lg: .75rem;
$pagination-padding-x-lg: 1.5rem;
$pagination-color: $link-color;
$pagination-bg: $white;
$pagination-border-width: $border-width;
$pagination-border-radius: $border-radius;
$pagination-margin-start: -$pagination-border-width;
$pagination-border-color: $gray-300;
$pagination-focus-color: $link-hover-color;
$pagination-focus-bg: $gray-200;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow;
$pagination-focus-outline: 0;
$pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-200;
$pagination-hover-border-color: $gray-300;
$pagination-active-color: $component-active-color;
$pagination-active-bg: $component-active-bg;
$pagination-active-border-color: $pagination-active-bg;
$pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $white;
$pagination-disabled-border-color: $gray-300;
$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;
$pagination-border-radius-sm: $border-radius-sm;
$pagination-border-radius-lg: $border-radius-lg;
Zosakaniza
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
.page-link {
padding: $padding-y $padding-x;
@include font-size($font-size);
}
.page-item {
@if $pagination-margin-start == (-$pagination-border-width) {
&:first-child {
.page-link {
@include border-start-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-end-radius($border-radius);
}
}
} @else {
//Add border-radius to all pageLinks in case they have left margin
.page-link {
@include border-radius($border-radius);
}
}
}
}