പേജിനേഷൻ
ഒന്നിലധികം പേജുകളിൽ ഉടനീളം ബന്ധപ്പെട്ട ഉള്ളടക്കങ്ങളുടെ ഒരു പരമ്പരയെ സൂചിപ്പിക്കാൻ പേജിനേഷൻ കാണിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.
അവലോകനം
ഞങ്ങളുടെ പേജിനേഷനായി കണക്റ്റുചെയ്‌ത ലിങ്കുകളുടെ ഒരു വലിയ ബ്ലോക്ക് ഞങ്ങൾ ഉപയോഗിക്കുന്നു, ലിങ്കുകൾ നഷ്‌ടപ്പെടാൻ ബുദ്ധിമുട്ടുള്ളതും എളുപ്പത്തിൽ സ്കെയിൽ ചെയ്യാവുന്നതുമാണ്-എല്ലാം വലിയ ഹിറ്റ് ഏരിയകൾ നൽകുമ്പോൾ. ലിസ്റ്റ് 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" 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 <span class="sr-only">(current)</span></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 class="sr-only">(current)</span>
</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 class="sr-only">(current)</span>
</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 class="sr-only">(current)</span>
</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" 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>