Síðuskipting
Skjöl og dæmi til að sýna blaðsíðugerð til að gefa til kynna að röð af tengdu efni sé til á mörgum síðum.
Yfirlit
Við notum stóran blokk af tengdum tenglum fyrir blaðsíðugerðina okkar, sem gerir það að verkum að tenglum er erfitt að missa af og auðvelt er að skalast við – allt á sama tíma og við bjóðum upp á stór höggsvæði. Síðuskipting er byggð með HTML-einingum á lista svo skjálesendur geti tilkynnt fjölda tiltækra tengla. Notaðu umbúðir <nav>
til að auðkenna það sem leiðsöguhluta fyrir skjálesendur og aðra hjálpartækni.
Þar að auki, þar sem síður hafa líklega fleiri en einn slíkan flakkhluta, er ráðlegt að gefa upp lýsingu aria-label
til <nav>
að endurspegla tilgang þess. Til dæmis, ef blaðsíðuhlutinn er notaður til að fletta á milli leitarniðurstaðna gæti viðeigandi merki verið 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>
Að vinna með táknum
Ertu að leita að því að nota tákn eða tákn í stað texta fyrir suma blaðsíðutengla? Vertu viss um að veita viðeigandi skjálesarastuðning með aria
eiginleikum.
<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>
Fötluð og virk ríki
Síðunartenglar eru sérhannaðar fyrir mismunandi aðstæður. Notaðu .disabled
fyrir tengla sem virðast ósmellanlegir og .active
til að gefa til kynna núverandi síðu.
Þó að .disabled
flokkurinn noti pointer-events: none
til að reyna að slökkva á tengivirkni <a>
s, þá er þessi CSS eign ekki enn staðlað og tekur ekki tillit til lyklaborðsleiðsögu. Sem slíkur ættirðu alltaf að bæta tabindex="-1"
við óvirkum hlekkjum og nota sérsniðið JavaScript til að slökkva á virkni þeirra að fullu.
<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>
Þú getur valfrjálst skipt út virkum eða óvirkum akkerum fyrir <span>
, eða sleppt akkerinu ef um er að ræða fyrri/næsta örvarnar, til að fjarlægja smellivirkni og koma í veg fyrir lyklaborðsfókus á meðan fyrirhuguðum stílum er haldið.
<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>
Stærð
Langar þig í stærri eða minni blaðsíðu? Bæta við .pagination-lg
eða .pagination-sm
fyrir fleiri stærðir.
<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>
Jöfnun
Breyttu röðun blaðsíðuíhluta með flexbox tólum .
<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
Breytur
$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);
}
}
}
}