Paginación
Qillqakuna chaymanta ejemplokuna paginakuna rikuchinapaq huk serie tupaq contenidokuna achka p'anqakunapi kasqanmanta rikuchinapaq.
Hatun qhawariy
Huk hatun bloque tinkisqa t'inkikuna p'anqaykupaq llamk'achiyku, t'inkikuna sasa pantay chaymanta mana sasa escalable ruwayku —tukuy hatun tupachisqa áreakuna quchkaspa. Paginación lista HTML elementokunawan ruwasqa chaymanta pantalla ñawiriqkuna willayta atinku hayk'a t'inkikuna kaqta. Huk p'istuy <nav>
elementota llamk'achiy huk puriy t'aqa hina riqsichinapaq ñawiriqkunata pantallapaq chaymanta wak yanapakuy tecnologiakuna.
Chaymanta, imaynachus p'anqakuna aswan huk chayhina puriy t'aqayuq kanku, allin kanman huk sut'inchayta quy chaymanta aria-label
chaypaq <nav>
propósito kaqta rikuchinanpaq. Ejemplopaq, sichus paginakuna componente huk huñu maskana ruwasqakuna ukhupi purinapaq llamk'achisqa, huk allin etiqueta kanman 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>
Iconokunawan llamk’ay
¿Wakin paginakuna t'inkikunapaq qillqap rantinpi huk icono utaq simp'ata llamk'achiyta maskachkankichu? Aswan allin pantalla ñawiriq yanapakuyta quy aria
atributokunawan.
<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>
Estados discapacitados y activos
Paginación t'inkikuna hukniray circunstanciakunapaq ruwanapaq kanku. Mana .disabled
ñit'inapaq hina rikhuriq t'inkikunapaq chaymanta .active
kunan p'anqata rikuchinapaq llamk'achiy.
Mientras .disabled
clase llamk'achin s t'inki ruwayta mana llamk'achiyta munaspapointer-events: none
, chay CSS propiedad manaraq estandarizadachu chaymanta mana teclado puriymanta yupayta qunchu. Chayhina, sapa kuti mana atichisqa t'inkikunapi yapanayki tiyan chaymanta sapanchasqa JavaScript llamk'achinayki tiyan tukuy ruwayninkuta mana llamk'achinapaq.<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>
Munasqaykimanta ruwasqa utaq mana atichisqa anclakuna kaqmanta t'inkinakuyta atikunki <span>
, utaq anclata saqiyta atikunki ñawpaq/qhipa flechakuna kaqpi, ñit'iy ruwanakunata hurqunapaq chaymanta teclado enfoqueta hark'anapaq munasqa estilokuna waqaychaspa.
<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>
Tamaño
¿Aswan hatunchu icha aswan huch’uy paginaciontachu munanki? Añadir .pagination-lg
o .pagination-sm
para tamaños adicionales.
<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>
Alineación
flexbox yanapakuykunawan paginakuna rakinakuna chiqanchayta tikray .
<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 nisqakuna
$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;
Mixinkuna
@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);
}
}
}
}