Paġnar
Dokumentazzjoni u eżempji biex juru l-paġnar biex jindikaw serje ta’ kontenut relatat teżisti fuq bosta paġni.
Ħarsa ġenerali
Aħna nużaw blokk kbir ta 'links konnessi għall-paġnarazzjoni tagħna, li jagħmlu links diffiċli biex jintilfu u faċilment skalabbli—kollha filwaqt li nipprovdu żoni kbar ta' hit. Il-paġnar huwa mibni b'elementi HTML tal-lista sabiex il-qarrejja tal-iskrin ikunu jistgħu jħabbru n-numru ta 'links disponibbli. Uża element tat-tgeżwir <nav>
biex tidentifikaha bħala sezzjoni tan-navigazzjoni għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza oħra.
Barra minn hekk, peress li l-paġni x'aktarx għandhom aktar minn sezzjoni waħda ta' navigazzjoni bħal din, huwa rakkomandabbli li tipprovdi deskrittiva aria-label
biex <nav>
tirrifletti l-iskop tagħha. Pereżempju, jekk il-komponent tal-paġnar jintuża biex jinnaviga bejn sett ta' riżultati ta' tfittxija, tikketta xierqa tista' tkun 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>
Ħidma ma 'ikoni
Qed tfittex li tuża ikona jew simbolu minflok it-test għal xi links tal-paġinazzjoni? Kun żgur li tipprovdi appoġġ xieraq għall-qarrej tal-iskrin bl- aria
attributi.
<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>
Stati b'diżabilità u attivi
Ir-rabtiet tal-paġnar huma customizable għal ċirkostanzi differenti. Uża .disabled
għal links li jidhru li ma jistgħux jiġu kklikkjati u .active
biex tindika l-paġna attwali.
Filwaqt li l- .disabled
klassi tuża pointer-events: none
biex tipprova tiddiżattiva l-funzjonalità tal-link ta ' <a>
s, dik il-proprjetà CSS għadha mhix standardizzata u ma tagħtix kont għan-navigazzjoni bit-tastiera. Bħala tali, għandek dejjem iżżid tabindex="-1"
links b'diżabilità u tuża JavaScript personalizzat biex tiddiżattiva kompletament il-funzjonalità tagħhom.
<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>
Tista' b'għażla tbiddel l-ankri attivi jew b'diżabilità għal <span>
, jew tħalli barra l-ankra fil-każ tal-vleġeġ ta' qabel/li jmiss, biex tneħħi l-funzjonalità tal-ikklikkja u tevita l-fokus tat-tastiera filwaqt li żżomm l-istili maħsuba.
<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>
Daqs
Fancy paginazzjoni akbar jew iżgħar? Żid .pagination-lg
jew .pagination-sm
għal daqsijiet addizzjonali.
<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>
Allinjament
Ibdel l-allinjament tal-komponenti tal-paġnar bl -utilitajiet tal-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
Varjabbli
$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);
}
}
}
}