Sivunumerointi
Asiakirjat ja esimerkit sivuttamisen osoittamisesta, mikä osoittaa, että useilla sivuilla on sarja aiheeseen liittyvää sisältöä.
Yleiskatsaus
Käytämme suurta joukkoa yhdistettyjä linkkejä sivutukseemme, mikä tekee linkeistä vaikeasti huomaamattomia ja helposti skaalautuvia – kaikki samalla tarjoamalla suuria osumaalueita. Sivutus on rakennettu luettelo-HTML-elementeillä, jotta näytönlukijat voivat ilmoittaa käytettävissä olevien linkkien määrän. Käytä rivityselementtiä <nav>
tunnistamaan se näytönlukuohjelmien ja muiden aputekniikoiden navigointiosiona.
Lisäksi, koska sivuilla on todennäköisesti useampi kuin yksi tällainen navigointiosio, on suositeltavaa antaa kuvaus aria-label
, <nav>
joka kuvastaa sen tarkoitusta. Jos esimerkiksi sivutuskomponenttia käytetään navigointiin hakutulosjoukon välillä, sopiva tunniste voisi olla 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>
Työskentely kuvakkeiden kanssa
Haluatko käyttää kuvaketta tai symbolia tekstin sijasta joissakin sivutuslinkeissä? Varmista, että annat oikean näytönlukijatuen aria
määritteillä.
<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>
Pois käytöstä ja aktiiviset tilat
Sivutuslinkit ovat muokattavissa erilaisiin olosuhteisiin. Käytä .disabled
linkkejä, joita ei voi napsauttaa, ja .active
osoittamaan nykyisen sivun.
Vaikka .disabled
luokka pointer-events: none
yrittää poistaa käytöstä s:n linkkitoiminnot ,<a>
tämä CSS-ominaisuus ei ole vielä standardoitu, eikä se ota huomioon näppäimistön navigointia. Siksi sinun tulee aina lisätä tabindex="-1"
käytöstä poistettuja linkkejä ja käyttää mukautettua JavaScriptiä niiden toiminnan poistamiseksi kokonaan käytöstä.
<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>
Voit halutessasi vaihtaa aktiiviset tai käytöstä poistetut ankkurit tilalle <span>
, tai jättää ankkurin pois edellisen/seuraavan nuolin tapauksessa poistaaksesi napsautustoiminnon ja estääksesi näppäimistön tarkennuksen säilyttäen samalla aiotut tyylit.
<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>
Mitoitus
Haluaisitko suuremman vai pienemmän sivutuksen? Lisää .pagination-lg
tai .pagination-sm
lisäkokoja varten.
<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>
Tasaus
Muuta sivutuskomponenttien kohdistusta flexbox-apuohjelmien kanssa .
<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
Muuttujat
$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;
Seokset
@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);
}
}
}
}