പേജിനേഷൻ
ഒന്നിലധികം പേജുകളിൽ ഉടനീളം ബന്ധപ്പെട്ട ഉള്ളടക്കങ്ങളുടെ ഒരു പരമ്പരയെ സൂചിപ്പിക്കാൻ പേജിനേഷൻ കാണിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.
അവലോകനം
ഞങ്ങളുടെ പേജിനേഷനായി കണക്റ്റുചെയ്ത ലിങ്കുകളുടെ ഒരു വലിയ ബ്ലോക്ക് ഞങ്ങൾ ഉപയോഗിക്കുന്നു, ലിങ്കുകൾ നഷ്ടപ്പെടാൻ ബുദ്ധിമുട്ടുള്ളതും എളുപ്പത്തിൽ സ്കെയിൽ ചെയ്യാവുന്നതുമാണ്-എല്ലാം വലിയ ഹിറ്റ് ഏരിയകൾ നൽകുമ്പോൾ. ലിസ്റ്റ് HTML ഘടകങ്ങൾ ഉപയോഗിച്ചാണ് പേജിനേഷൻ നിർമ്മിച്ചിരിക്കുന്നത്, അതിനാൽ സ്ക്രീൻ റീഡർമാർക്ക് ലഭ്യമായ ലിങ്കുകളുടെ എണ്ണം പ്രഖ്യാപിക്കാനാകും. <nav>
സ്ക്രീൻ റീഡറുകളിലേക്കും മറ്റ് സഹായ സാങ്കേതികവിദ്യകളിലേക്കും ഒരു നാവിഗേഷൻ വിഭാഗമായി തിരിച്ചറിയാൻ ഒരു റാപ്പിംഗ് ഘടകം ഉപയോഗിക്കുക .
കൂടാതെ, പേജുകളിൽ അത്തരത്തിലുള്ള ഒന്നിലധികം നാവിഗേഷൻ വിഭാഗങ്ങൾ ഉള്ളതിനാൽ, അതിന്റെ ഉദ്ദേശ്യം പ്രതിഫലിപ്പിക്കുന്നതിന് ഒരു വിവരണം aria-label
നൽകുന്നത് ഉചിതമാണ്. <nav>
ഉദാഹരണത്തിന്, ഒരു കൂട്ടം തിരയൽ ഫലങ്ങൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യാൻ പേജിനേഷൻ ഘടകം ഉപയോഗിക്കുന്നുവെങ്കിൽ, ഉചിതമായ ഒരു ലേബൽ 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>
ഐക്കണുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നു
ചില പേജിനേഷൻ ലിങ്കുകൾക്കായി ടെക്സ്റ്റിന്റെ സ്ഥാനത്ത് ഒരു ഐക്കണോ ചിഹ്നമോ ഉപയോഗിക്കാൻ നോക്കുകയാണോ? aria
ആട്രിബ്യൂട്ടുകൾക്കൊപ്പം ശരിയായ സ്ക്രീൻ റീഡർ പിന്തുണ നൽകുന്നത് ഉറപ്പാക്കുക .
<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>
അപ്രാപ്തവും സജീവവുമായ സംസ്ഥാനങ്ങൾ
വ്യത്യസ്ത സാഹചര്യങ്ങൾക്കനുസരിച്ച് പേജിനേഷൻ ലിങ്കുകൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. .disabled
അൺ-ക്ലിക്ക് ചെയ്യാനാകുന്ന ലിങ്കുകൾക്കും .active
നിലവിലെ പേജ് സൂചിപ്പിക്കാനും ഉപയോഗിക്കുക .
s- ന്റെ ലിങ്ക് പ്രവർത്തനം പ്രവർത്തനരഹിതമാക്കാൻ ക്ലാസ് .disabled
ഉപയോഗിക്കുമ്പോൾ , ആ CSS പ്രോപ്പർട്ടി ഇതുവരെ സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല കൂടാതെ കീബോർഡ് നാവിഗേഷൻ കണക്കിലെടുക്കുന്നില്ല. അതുപോലെ, നിങ്ങൾ എല്ലായ്പ്പോഴും പ്രവർത്തനരഹിതമാക്കിയ ലിങ്കുകളിൽ ചേർക്കുകയും അവയുടെ പ്രവർത്തനം പൂർണ്ണമായി പ്രവർത്തനരഹിതമാക്കുന്നതിന് ഇഷ്ടാനുസൃത JavaScript ഉപയോഗിക്കുകയും വേണം.pointer-events: none
<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>
എന്നതിനായുള്ള സജീവമായതോ അപ്രാപ്തമാക്കിയതോ ആയ ആങ്കറുകൾ നിങ്ങൾക്ക് ഓപ്ഷണലായി സ്വാപ്പ് ചെയ്യാം <span>
അല്ലെങ്കിൽ മുൻ/അടുത്ത അമ്പടയാളങ്ങളുടെ കാര്യത്തിൽ ആങ്കർ ഒഴിവാക്കാം, ക്ലിക്ക് പ്രവർത്തനം നീക്കം ചെയ്യാനും ഉദ്ദേശിച്ച ശൈലികൾ നിലനിർത്തുമ്പോൾ കീബോർഡ് ഫോക്കസ് തടയാനും കഴിയും.
<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>
വലിപ്പം
വലുതോ ചെറുതോ ആയ പേജിനേഷൻ ഇഷ്ടമാണോ? അധിക വലുപ്പങ്ങൾ ചേർക്കുക .pagination-lg
അല്ലെങ്കിൽ ചേർക്കുക..pagination-sm
<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>
വിന്യാസം
ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് പേജിനേഷൻ ഘടകങ്ങളുടെ വിന്യാസം മാറ്റുക .
<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>
സാസ്
വേരിയബിളുകൾ
$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;
മിക്സിൻസ്
@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);
}
}
}
}