Source

പേജിനേഷൻ

ഒന്നിലധികം പേജുകളിൽ ഉടനീളം ബന്ധപ്പെട്ട ഉള്ളടക്കങ്ങളുടെ ഒരു പരമ്പരയെ സൂചിപ്പിക്കാൻ പേജിനേഷൻ കാണിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.

അവലോകനം

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

<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">&laquo;</span>
        <span class="sr-only">Previous</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">&raquo;</span>
        <span class="sr-only">Next</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">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <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">
      <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 disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </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">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">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>