Source

Pagination

Belgekirin û mînakên ji bo nîşandana pagasyonê ji bo nîşankirina rêzek naveroka têkildar di gelek rûpelan de hene.

Têgihiştinî

Em blokek mezin a girêdanên girêdayî ji bo rûpela xwe bikar tînin, girêdanên ku ji bîr nabin û bi hêsanî têne mezin kirin-hemû di heman demê de ku deverên lêdan ên mezin peyda dikin. Rûpel bi hêmanên HTML-ê yên navnîşê ve hatî çêkirin da ku xwendevanên ekranê dikarin hejmara girêdanên berdest ragihînin. Hêmanek pêçandî bikar bînin <nav>da ku wê wekî beşa navîgasyonê ji xwendevanên ekranê û teknolojiyên din ên arîkar re nas bikin.

aria-labelWekî din, ji ber ku rûpelan îhtîmalek zêdetir ji yek beşên navîgasyonê yên weha hene, tê pêşniyar kirin ku ji bo ku <nav>armanca xwe nîşan bide ravekirinek peyda bike. Mînakî, heke pêkhateya pagasyonê ji bo gera di navbera komek encamên lêgerînê de were bikar anîn, dibe ku nîşanek guncan be 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>

Bi îkonan re dixebitin

Ma hûn dixwazin ji bo hin girêdanên pagasyonê li şûna nivîsê îkonek an sembolek bikar bînin? ariaBawer bikin ku bi taybetmendiyan piştgirîya xwendevana ekrana rast peyda bikin .

<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>
      </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>
      </a>
    </li>
  </ul>
</nav>

Dewletên astengdar û çalak

Zencîreyên pagasyonê ji bo rewşên cihêreng têne xweş kirin. Ji .disabledbo girêdanên ku ne-klîk xuya dikin û .activeji bo nîşankirina rûpela heyî bikar bînin.

Dema ku .disabledçîn hewlpointer-events: none dide ku fonksiyona girêdanê ya s neçalak bike, ew taybetmendiya CSS hîn ne standardkirî ye û navîgasyona klavyeyê hesab nake. Bi vî rengî, divê hûn her gav li ser girêdanên neçalak zêde bikin û JavaScript-a xwerû bikar bînin da ku fonksiyona wan bi tevahî neçalak bikin.<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>

Hûn dikarin vebijarkî lengerên çalak an neçalak biguhezînin <span>, an jî di tîrên berê/paşîn de lengerê derxînin, da ku fonksiyona klîk jêbirin û dema ku şêwazên mebest diparêzin rê li ber baldariya klavyeyê bigirin.

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

Mezinbûn

Dixwazin rûpela mezin an piçûktir bikin? Zêde bikin .pagination-lgan .pagination-smji bo pîvanên din.

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

Alignment

Bi karûbarên flexbox re lihevhatina hêmanên paginasyonê biguherînin .

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