Σελιδοποίηση

Τεκμηρίωση και παραδείγματα για την εμφάνιση σελιδοποίησης για την ένδειξη μιας σειράς σχετικού περιεχομένου υπάρχουν σε πολλές σελίδες.

Σε αυτήν την σελίδα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Χρησιμοποιούμε ένα μεγάλο μπλοκ συνδεδεμένων συνδέσμων για τη σελιδοποίησή μας, καθιστώντας τους συνδέσμους δύσκολο να τις χάσουμε και να κλιμακωθούν εύκολα—όλα αυτά παρέχοντας παράλληλα μεγάλες περιοχές επισκέψεων. Η σελιδοποίηση είναι κατασκευασμένη με στοιχεία HTML λίστας, ώστε οι αναγνώστες οθόνης να μπορούν να ανακοινώνουν τον αριθμό των διαθέσιμων συνδέσμων. Χρησιμοποιήστε ένα <nav>στοιχείο αναδίπλωσης για να το προσδιορίσετε ως τμήμα πλοήγησης σε προγράμματα ανάγνωσης οθόνης και άλλες βοηθητικές τεχνολογίες.

Επιπλέον, καθώς οι σελίδες έχουν πιθανώς περισσότερες από μία τέτοιες ενότητες πλοήγησης, συνιστάται να παρέχετε ένα περιγραφικό aria-labelγια <nav>να αντικατοπτρίζει το σκοπό του. Για παράδειγμα, εάν το στοιχείο σελιδοποίησης χρησιμοποιείται για πλοήγηση μεταξύ ενός συνόλου αποτελεσμάτων αναζήτησης, μια κατάλληλη ετικέτα θα μπορούσε να είναι 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>

Εργασία με εικονίδια

Θέλετε να χρησιμοποιήσετε ένα εικονίδιο ή σύμβολο στη θέση του κειμένου για ορισμένους συνδέσμους σελιδοποίησης; Φροντίστε να παρέχετε την κατάλληλη υποστήριξη ανάγνωσης οθόνης με ariaχαρακτηριστικά.

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

Αναπηρία και ενεργές καταστάσεις

Οι σύνδεσμοι σελιδοποίησης είναι προσαρμόσιμοι για διαφορετικές περιστάσεις. Χρησιμοποιήστε .disabledτο για συνδέσμους που εμφανίζονται χωρίς κλικ και .activeγια να υποδείξετε την τρέχουσα σελίδα.

Ενώ η .disabledκλάση χρησιμοποιεί pointer-events: noneγια να προσπαθήσει να απενεργοποιήσει τη λειτουργία συνδέσμου του <a>s, αυτή η ιδιότητα CSS δεν είναι ακόμη τυποποιημένη και δεν λαμβάνει υπόψη την πλοήγηση με πληκτρολόγιο. Ως εκ τούτου, θα πρέπει πάντα να προσθέτετε tabindex="-1"απενεργοποιημένους συνδέσμους και να χρησιμοποιείτε προσαρμοσμένη JavaScript για να απενεργοποιείτε πλήρως τη λειτουργικότητά τους.

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

Μπορείτε προαιρετικά να ανταλλάξετε ενεργές ή απενεργοποιημένες άγκυρες για <span>, ή να παραλείψετε την άγκυρα στην περίπτωση του προηγούμενου/επόμενου βέλους, για να καταργήσετε τη λειτουργία κλικ και να αποτρέψετε την εστίαση του πληκτρολογίου διατηρώντας τα επιδιωκόμενα στυλ.

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

Κόλλα

Θέλετε μεγαλύτερη ή μικρότερη σελιδοποίηση; Προσθέστε .pagination-lgή .pagination-smγια επιπλέον μεγέθη.

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

Ευθυγραμμία

Αλλάξτε την ευθυγράμμιση των στοιχείων σελιδοποίησης με βοηθητικά προγράμματα 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

Μεταβλητές

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

Μίξεις

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