Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Lapu šķirošana

Dokumentācija un piemēri lappušu rādīšanai, lai norādītu, ka vairākās lapās pastāv saistīta satura sērija.

Šajā lapā

Pārskats

Mēs izmantojam lielu savienoto saišu bloku savai lappusei, padarot saites grūti nepamanāmas un viegli pielāgojamas, vienlaikus nodrošinot lielus trāpījumu apgabalus. Lapu kārtošana ir veidota ar saraksta HTML elementiem, lai ekrāna lasītāji varētu paziņot pieejamo saišu skaitu. Izmantojiet iesaiņojuma <nav>elementu, lai identificētu to kā ekrāna lasītāju un citu palīgtehnoloģiju navigācijas sadaļu.

Turklāt, tā kā lapās, iespējams, ir vairāk nekā viena šāda navigācijas sadaļa, ir ieteicams sniegt aprakstu aria-label, <nav>lai atspoguļotu tās mērķi. Piemēram, ja lappušu veidošanas komponents tiek izmantots, lai pārvietotos starp meklēšanas rezultātu kopu, piemērota etiķete varētu būt 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>

Darbs ar ikonām

Vai vēlaties izmantot ikonu vai simbolu teksta vietā dažām lappušu saitēm? Noteikti nodrošiniet atbilstošu ekrāna lasītāja atbalstu ar ariaatribūtiem.

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

Atspējoti un aktīvi stāvokļi

Lappuses saites ir pielāgojamas dažādiem apstākļiem. Izmantojiet .disabledsaitēm, uz kurām nevar noklikšķināt, un .activelai norādītu pašreizējo lapu.

Lai gan .disabledklase izmanto pointer-events: none, lai mēģinātu atspējot s saites funkcionalitāti <a>, šis CSS rekvizīts vēl nav standartizēts un neņem vērā tastatūras navigāciju. Tāpēc vienmēr ir jāpievieno tabindex="-1"atspējotās saites un jāizmanto pielāgots JavaScript, lai pilnībā atspējotu to funkcionalitāti.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Varat pēc izvēles nomainīt aktīvos vai atspējotos enkurus pret <span>vai izlaist enkuru, ja tiek rādītas iepriekšējās/nākamās bultiņas, lai noņemtu klikšķu funkcionalitāti un novērstu tastatūras fokusu, vienlaikus saglabājot paredzētos stilus.

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

Izmēru noteikšana

Vai vēlaties lielāku vai mazāku lappušu skaitu? Pievienojiet .pagination-lgvai .pagination-smpapildu izmēriem.

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

Izlīdzināšana

Mainiet lappušu sadalīšanas komponentu izlīdzināšanu ar flexbox utilītprogrammām .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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" aria-disabled="true">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

Mainīgie lielumi

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

Maisījumi

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