Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Go ngwala matlakala

Ditokomane le mehlala ya go bontšha matlakala go laetša lelokelelo la diteng tše di amanago di gona go ralala le matlakala a mantši.

Letlakaleng le

Kakaretšo

Re diriša boloko e kgolo ya dikgokagano tše di kgokagantšwego bakeng sa go dira matlakala a rena, re dira gore dikgokagano di be thata go di foša le go katološwa gabonolo—ka moka re dutše re nea mafelo a magolo ao a hlaselwago. Matlakala e agilwe ka dielemente tša HTML tša lenaneo gore babadi ba skrine ba kgone go tsebagatša palo ya dikgokagano tše di lego gona. Šomiša elemente ya go phuthela <nav>go e hlaola bjalo ka karolo ya go sepelasepela go dibadi tša go hlahloba le theknolotši ye nngwe ya go thuša.

Go tlaleletša, ka ge matlakala go bonagala a e-na le karolo e fetago e tee e bjalo ya go sepelasepela, go eletšwa go nea tlhaloso aria-labelbakeng sa <nav>go bontšha morero wa yona. Ka mohlala, ge e ba karolo ya matlakala e dirišwa go sepelasepela magareng ga sete ya dipoelo tša nyakišišo, leina la maleba e ka ba 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>

Go šoma ka diaekhone

O nyaka go šomiša leswao goba leswao legatong la sengwalwa bakeng sa dikgokagano tše dingwe tša matlakala? Kgonthiša gore o fana ka thekgo ya maleba ya sebadi sa skrine ka ariadika.

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

Bogolofadi le mafolofolo e re

Dikgokagano tša matlakala di ka fetošwa bakeng sa maemo a fapanego. Šomiša .disabledbakeng sa dikgokagano tšeo di bonagalago di sa kgotle le .activego bontšha letlakala la bjale.

Le ge .disabledsehlopha se šomiša pointer-events: nonego leka go šitiša mošomo wa kgokagano ya <a>s, thepa yeo ya CSS ga se ya hlwa e bewa maemo ebile ga e akaretše go sepelasepela ga khiiboto. Ka ge go le bjalo, o swanetše go oketša tabindex="-1"ka mehla dikgokagano tše di golofetšego gomme o šomiše JavaScript ya tlwaelo go šitiša ka botlalo mošomo wa tšona.

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

O ka fapantšha ka boikgethelo ditshetledi tše di šomago goba tše di golofetšego bakeng sa <span>, goba wa tlogela ankora tabeng ya metsu ya peleng/ye e latelago, go tloša mošomo wa go klika le go thibela go tsepamiša kgopolo ga khiiboto mola o boloka mekgwa yeo e reretšwego.

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

Go lekanyetša bogolo

Fancy kgolo goba e nyenyane pagination? Oketša .pagination-lggoba .pagination-smbakeng sa bogolo bja tlaleletšo.

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

Go logaganya

Fetoša go logaganya ga dikarolo tša matlakala ka didirišwa tša flexbox .

<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

Diphetogo

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

Ditswaki

@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);
      }
    }
  }
}