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