Source

Paġnar

Dokumentazzjoni u eżempji biex juru l-paġnar biex jindikaw serje ta’ kontenut relatat teżisti fuq bosta paġni.

Ħarsa ġenerali

Aħna nużaw blokk kbir ta 'links konnessi għall-paġnarazzjoni tagħna, li jagħmlu links diffiċli biex jintilfu u faċilment skalabbli—kollha filwaqt li nipprovdu żoni kbar ta' hit. Il-paġnar huwa mibni b'elementi HTML tal-lista sabiex il-qarrejja tal-iskrin ikunu jistgħu jħabbru n-numru ta 'links disponibbli. Uża element tat-tgeżwir <nav>biex tidentifikaha bħala sezzjoni tan-navigazzjoni għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza oħra.

Barra minn hekk, peress li l-paġni x'aktarx għandhom aktar minn sezzjoni waħda ta' navigazzjoni bħal din, huwa rakkomandabbli li tipprovdi deskrittiva aria-labelbiex <nav>tirrifletti l-iskop tagħha. Pereżempju, jekk il-komponent tal-paġnar jintuża biex jinnaviga bejn sett ta' riżultati ta' tfittxija, tikketta xierqa tista' tkun 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>

Ħidma ma 'ikoni

Qed tfittex li tuża ikona jew simbolu minflok it-test għal xi links tal-paġinazzjoni? Kun żgur li tipprovdi appoġġ xieraq għall-qarrej tal-iskrin bl aria-attributi u l- .sr-onlyutilità.

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

Stati b'diżabilità u attivi

Ir-rabtiet tal-paġnar huma customizable għal ċirkostanzi differenti. Uża .disabledgħal links li jidhru li ma jistgħux jiġu kklikkjati u .activebiex tindika l-paġna attwali.

Filwaqt li l- .disabledklassi tuża pointer-events: nonebiex tipprova tiddiżattiva l-funzjonalità tal-link ta ' <a>s, dik il-proprjetà CSS għadha mhix standardizzata u ma tagħtix kont għan-navigazzjoni bit-tastiera. Bħala tali, għandek dejjem iżżid tabindex="-1"links b'diżabilità u tuża JavaScript personalizzat biex tiddiżattiva kompletament il-funzjonalità tagħhom.

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

Tista' b'għażla tbiddel l-ankri attivi jew b'diżabilità għal <span>, jew tħalli barra l-ankra fil-każ tal-vleġeġ ta' qabel/li jmiss, biex tneħħi l-funzjonalità tal-ikklikkja u tevita l-fokus tat-tastiera filwaqt li żżomm l-istili maħsuba.

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

Daqs

Fancy paginazzjoni akbar jew iżgħar? Żid .pagination-lgjew .pagination-smgħal daqsijiet addizzjonali.

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

Allinjament

Ibdel l-allinjament tal-komponenti tal-paġnar bl -utilitajiet tal-flexbox .

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