Tudaleniad

Mae dogfennaeth ac enghreifftiau ar gyfer dangos tudaleniad i ddangos cyfres o gynnwys cysylltiedig yn bodoli ar draws sawl tudalen.

Trosolwg

Rydyn ni'n defnyddio bloc mawr o ddolenni cysylltiedig ar gyfer ein tudalen, gan wneud dolenni'n anodd eu colli ac yn hawdd eu graddio - i gyd wrth ddarparu mannau taro mawr. Mae tudaleniad wedi'i adeiladu gydag elfennau HTML rhestr fel y gall darllenwyr sgrin gyhoeddi nifer y dolenni sydd ar gael. Defnyddiwch elfen lapio <nav>i'w nodi fel adran llywio i ddarllenwyr sgrin a thechnolegau cynorthwyol eraill.

Yn ogystal, gan ei bod yn debygol bod gan dudalennau fwy nag un adran llywio o'r fath, fe'ch cynghorir i ddarparu disgrifiad aria-labeler <nav>mwyn adlewyrchu ei ddiben. Er enghraifft, os defnyddir y gydran dudaleniad i lywio rhwng set o ganlyniadau chwilio, gallai label priodol fod yn 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>

Gweithio gydag eiconau

Eisiau defnyddio eicon neu symbol yn lle testun ar gyfer rhai dolenni tudalen? Gwnewch yn siŵr eich bod chi'n darparu cefnogaeth darllenydd sgrin gywir gyda ariaphriodoleddau a'r .sr-onlycyfleustodau.

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

Gwladwriaethau anabl a gweithredol

Mae dolenni tudalen yn addasadwy ar gyfer gwahanol amgylchiadau. Defnyddiwch .disabledar gyfer dolenni sy'n ymddangos na ellir eu clicio ac .activei nodi'r dudalen gyfredol.

Er bod y .disableddosbarth yn defnyddio pointer-events: nonei geisio analluogi swyddogaeth cyswllt <a>s, nid yw'r eiddo CSS hwnnw wedi'i safoni eto ac nid yw'n cyfrif am lywio bysellfwrdd. O'r herwydd, dylech bob amser ychwanegu tabindex="-1"dolenni anabl a defnyddio JavaScript wedi'i deilwra i analluogi eu swyddogaeth yn llawn.

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

Yn ddewisol, gallwch gyfnewid angorau gweithredol neu anabl am <span>, neu hepgor yr angor yn achos y saethau blaenorol/nesaf, i ddileu ymarferoldeb clicio ac atal ffocws bysellfwrdd tra'n cadw'r arddulliau bwriedig.

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

Maintioli

Awydd tudaleniad mwy neu lai? Ychwanegu .pagination-lgneu .pagination-smar gyfer meintiau ychwanegol.

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

Aliniad

Newid aliniad cydrannau tudaleniad gyda chyfleustodau 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>