Fuulaa (Pagination) jedhu

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

Fuula kana irratti

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

Haalata hanqifamee fi socho'aa

Hidhamtoonni fuula (pagination links) haala adda addaatiif haala barbaadamuun kan jijjiiramudha. .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">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</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" aria-current="page">
      <span class="page-link">2</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 active" aria-current="page">
      <span class="page-link">1</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>
    </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">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">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>

Sass jedhama

Jijjiiramoota

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-width:           $border-width;
$pagination-border-radius:          $border-radius;
$pagination-margin-start:           -$pagination-border-width;
$pagination-border-color:           $gray-300;

$pagination-focus-color:            $link-hover-color;
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            $link-hover-color;
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Mixins jedhaman

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  .page-link {
    padding: $padding-y $padding-x;
    @include font-size($font-size);
  }

  .page-item {
    @if $pagination-margin-start == (-$pagination-border-width) {
      &:first-child {
        .page-link {
          @include border-start-radius($border-radius);
        }
      }

      &:last-child {
        .page-link {
          @include border-end-radius($border-radius);
        }
      }
    } @else {
      //Add border-radius to all pageLinks in case they have left margin
      .page-link {
        @include border-radius($border-radius);
      }
    }
  }
}