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વર્તમાન પૃષ્ઠ સૂચવવા માટે ઉપયોગ કરો.

જ્યારે .disabledવર્ગ s ની લિંક કાર્યક્ષમતાને અક્ષમ કરવાનો પ્રયાસ કરવા માટે pointer-events: noneઉપયોગ કરે<a> છે , તે CSS ગુણધર્મ હજી પ્રમાણિત નથી અને કીબોર્ડ નેવિગેશન માટે જવાબદાર નથી. જેમ કે, તમારે હંમેશા tabindex="-1"અક્ષમ કરેલ લિંક્સ ઉમેરવી જોઈએ અને તેમની કાર્યક્ષમતાને સંપૂર્ણપણે અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરવો જોઈએ.

<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>