Source

Papyaj

Dokimantasyon ak egzanp pou montre paginasyon pou endike yon seri kontni ki gen rapò ak egziste sou plizyè paj.

Apèsi sou lekòl la

Nou itilize yon gwo blòk lyen konekte pou paginasyon nou an, sa ki fè lyen difisil pou rate ak fasilman évolutive-tout pandan y ap bay gwo zòn frape. Pajinasyon bati ak lis eleman HTML pou lektè ekran yo ka anonse kantite lyen ki disponib yo. Sèvi ak yon eleman anbalaj <nav>pou idantifye li kòm yon seksyon navigasyon pou ekran lektè ak lòt teknoloji asistans.

Anplis de sa, kòm paj gen plis pase yon seksyon navigasyon sa yo, li rekòmande pou bay yon deskripsyon aria-labelpou <nav>reflete objektif li. Pou egzanp, si yo itilize eleman paginasyon an pou navige ant yon seri rezilta rechèch, yon etikèt apwopriye ta ka 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>

Travay ak ikon

Èske w ap chèche sèvi ak yon icon oswa yon senbòl nan plas tèks pou kèk lyen pajinasyon? Asire ou ke ou bay bon sipò lektè ekran ak ariaatribi ak .sr-onlysèvis piblik la.

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

Eta andikape ak aktif

Lyen pajyon yo ka personnalisable pou diferan sikonstans. Sèvi ak .disabledpou lyen ki parèt pa klike ak .activepou endike paj aktyèl la.

Pandan ke .disabledklas la itilize pointer-events: nonepou eseye enfim fonksyonalite lyen nan <a>s, pwopriyete CSS sa a poko ofisyèl epi li pa konte pou navigasyon klavye. Kòm sa yo, ou ta dwe toujou ajoute tabindex="-1"sou lyen ki andikape epi sèvi ak JavaScript koutim pou konplètman enfim fonksyonalite yo.

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

Opsyonèlman, ou ka chanje jete lank aktif oswa ki andikape pou <span>, oswa omisyon jete lank nan ka flèch yo anvan/pwochen, pou retire fonksyon klike sou epi anpeche konsantre sou klavye pandan w ap kenbe estil entansyon yo.

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

Dimansyon

Anpenpan pi gwo oswa pi piti paginasyon? Ajoute .pagination-lgoswa .pagination-smpou gwosè adisyonèl.

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

Aliyman

Chanje aliyman eleman paginasyon yo ak sèvis piblik 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>