Pagination
Takaddun bayanai da misalai don nuna shafi don nuna jerin abubuwan da ke da alaƙa suna wanzuwa a cikin shafuka da yawa.
Dubawa
Muna amfani da babban toshe hanyoyin haɗin yanar gizon mu, yin hanyoyin haɗin kai da wuya a rasa kuma a sauƙaƙe - duk yayin samar da manyan wuraren da aka buge. An gina pagination tare da jerin abubuwan HTML don haka masu karatun allo zasu iya sanar da adadin hanyoyin haɗin yanar gizo. Yi amfani da abin rufewa <nav>
don gano shi azaman sashin kewayawa don tantance masu karatu da sauran fasahar taimako.
Bugu da kari, kamar yadda yuwuwar shafuka suna da irin wannan sashin kewayawa fiye da ɗaya, yana da kyau a samar da siffata aria-label
don <nav>
nuna manufarsa. Misali, idan an yi amfani da ɓangaren rubutun don kewaya tsakanin saitin sakamakon bincike, alamar da ta dace zata iya zama 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>
Aiki tare da gumaka
Ana neman amfani da gunki ko alama a wurin rubutu don wasu hanyoyin haɗin yanar gizo? Tabbatar da samar da ingantaccen tallafin mai karanta allo tare da aria
halaye.
<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>
Jihohi naƙasassu da aiki
Ana iya daidaita hanyoyin haɗin yanar gizo don yanayi daban-daban. Yi amfani .disabled
da hanyoyin haɗin da suka bayyana ba za a iya dannawa ba kuma .active
don nuna shafin na yanzu.
Yayin da .disabled
ajin ke amfani pointer-events: none
da shi don ƙoƙarin kashe aikin haɗin yanar gizo na <a>
s, wannan kadarorin CSS ba a daidaita ba tukuna kuma baya lissafin kewayawa madannai. Don haka, koyaushe yakamata ku ƙara tabindex="-1"
akan hanyoyin haɗin yanar gizo na nakasa kuma kuyi amfani da JavaScript na al'ada don musaki cikakken aikin su.
<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>
Kuna iya zaɓin musanya anka masu aiki ko nakasassu don <span>
, ko barin anka a cikin yanayin kiban da suka gabata/na gaba, don cire ayyukan dannawa da hana mayar da hankali kan madannai yayin riƙe da salon da aka yi niyya.
<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>
Girman girma
Zaki fi girma ko ƙarami? Ƙara .pagination-lg
ko .pagination-sm
don ƙarin girma.
<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>
Daidaitawa
Canja jeri na abubuwan haɗin shafi tare da kayan aikin flexbox .
<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
Masu canji
$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);
}
}
}
}