Pagination
Belgekirin û mînakên ji bo nîşandana pagasyonê ji bo nîşankirina rêzek naveroka têkildar di gelek rûpelan de hene.
Têgihiştinî
Em blokek mezin a girêdanên girêdayî ji bo rûpela xwe bikar tînin, girêdanên ku ji bîr nabin û bi hêsanî têne mezin kirin-hemû di heman demê de ku deverên lêdan ên mezin peyda dikin. Rûpel bi hêmanên HTML-ê yên navnîşê ve hatî çêkirin da ku xwendevanên ekranê dikarin hejmara girêdanên berdest ragihînin. Hêmanek pêçandî bikar bînin <nav>
da ku wê wekî beşa navîgasyonê ji xwendevanên ekranê û teknolojiyên din ên arîkar re nas bikin.
aria-label
Wekî din, ji ber ku rûpelan îhtîmalek zêdetir ji yek beşên navîgasyonê yên weha hene, tê pêşniyar kirin ku ji bo ku <nav>
armanca xwe nîşan bide ravekirinek peyda bike. Mînakî, heke pêkhateya pagasyonê ji bo gera di navbera komek encamên lêgerînê de were bikar anîn, dibe ku nîşanek guncan be 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>
Bi îkonan re dixebitin
Ma hûn dixwazin ji bo hin girêdanên pagasyonê li şûna nivîsê îkonek an sembolek bikar bînin? aria
Bawer bikin ku bi taybetmendiyan piştgirîya xwendevana ekrana rast peyda bikin .
<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>
Dewletên astengdar û çalak
Zencîreyên pagasyonê ji bo rewşên cihêreng têne xweş kirin. Ji .disabled
bo girêdanên ku ne-klîk xuya dikin û .active
ji bo nîşankirina rûpela heyî bikar bînin.
Dema ku .disabled
çîn hewlpointer-events: none
dide ku fonksiyona girêdanê ya s neçalak bike, ew taybetmendiya CSS hîn ne standardkirî ye û navîgasyona klavyeyê hesab nake. Bi vî rengî, divê hûn her gav li ser girêdanên neçalak zêde bikin û JavaScript-a xwerû bikar bînin da ku fonksiyona wan bi tevahî neçalak bikin.<a>
tabindex="-1"
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">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>
Hûn dikarin vebijarkî lengerên çalak an neçalak biguhezînin <span>
, an jî di tîrên berê/paşîn de lengerê derxînin, da ku fonksiyona klîk jêbirin û dema ku şêwazên mebest diparêzin rê li ber baldariya klavyeyê bigirin.
<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>
Mezinbûn
Dixwazin rûpela mezin an piçûktir bikin? Zêde bikin .pagination-lg
an .pagination-sm
ji bo pîvanên din.
<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>
Alignment
Bi karûbarên flexbox re lihevhatina hêmanên paginasyonê biguherînin .
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">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">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
Variables
$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;
Mixins
@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);
}
}
}
}