Source

Fuulaa (Pagination) jedhu

Galmee fi fakkeenyota fuula agarsiisuuf qabiyyee walqabate tartiiba agarsiisuuf fuula hedduu keessa jira.

Haala Waliigalaa

Fuula keenyaaf hidhannoowwan walitti hidhaman bilookii guddaa fayyadamna, hidhannoowwan akka hin darbinee fi salphaatti akka guddatan taasisa-kun hundi naannoo rukuttaa gurguddoo yeroo kenninu. Fuulli elementoota HTML tarree waliin ijaarameera kanaaf dubbistoonni iskiriinii baay'ina hidhannoo jiran beeksisuu danda'u. <nav>Dubbistoota fi teeknooloojiiwwan gargaarsaa biroo iskiriinii gochuuf akka kutaa navigeeshinii adda baasuuf qaama marfama fayyadami .

Dabalataanis, fuulonni kutaa navigeeshinii akkasii tokkoo ol qabaachuu waan hin oolleef, kaayyoo isaa calaqqisiisuuf ibsa kennuunis aria-labelgaariidha <nav>. Fakkeenyaaf, yoo qaamni fuula tuuta bu'aa barbaacha gidduutti naanna'uuf fayyadame, asxaan sirrii ta'uu danda'a 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>

Mallattoolee wajjin hojjechuu

Hidhamtoota fuula tokko tokkoof bakka barruu mallattoo ykn mallattoo fayyadamuu barbaadduu? ariaAmaloota fi .sr-onlyfaayidaa waliin deeggarsa dubbisaa iskiriinii sirrii ta'e kennuu mirkaneessi .

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

Haalata hanqifamee fi socho'aa

Hidhamtoonni fuula (pagination links) haala adda addaatiif kan ofii barbaade ta'uu danda'u. .disabledHidhamtoota hin cuqaafamne fakkaatanii fi .activefuula ammaa agarsiisuuf fayyadami .

.disabledGitni dalagaa hidhaa s hanqisuuf pointer-events: noneyaaluuf yoo fayyadamu ,<a> qabeentiin CSS sun ammallee sadarkaa hin qabnee fi qajeelcha furtuu hin herrega. Akka kanaan, yeroo hunda tabindex="-1"hidhannoowwan hanqifaman irratti dabaluu fi hojii isaanii guutummaatti hanqisuuf JaavaScript amala fayyadamuu qabda.

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

Filannoodhaan ankuraa socho'aa ykn hanqifame dhaaf jijjiiruu dandeessa <span>, ykn haala xiyyawwan duraa/itti aanuu keessatti ankuraa dhiisuu dandeessa, dalagaa cuqaasuu haquu fi xiyyeeffannoo gabatee furtuu yeroo akkaataa yaadame qabattee ittisuuf.

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

Saayizii gochuu

Fuula guddaa moo xiqqaa ta'e barbaadduu? Dabalaa .pagination-lgykn .pagination-smsafara dabalataaf.

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

Hiriirsuu

Hiriirsa qaamolee fuula faayilii flexbox waliin jijjiiri .

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