Σελιδοποίηση
Τεκμηρίωση και παραδείγματα για την εμφάνιση σελιδοποίησης για την ένδειξη μιας σειράς σχετικού περιεχομένου υπάρχουν σε πολλές σελίδες.
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Χρησιμοποιούμε ένα μεγάλο μπλοκ συνδεδεμένων συνδέσμων για τη σελιδοποίησή μας, καθιστώντας τους συνδέσμους δύσκολο να τις χάσουμε και να κλιμακωθούν εύκολα—όλα αυτά παρέχοντας παράλληλα μεγάλες περιοχές επισκέψεων. Η σελιδοποίηση είναι κατασκευασμένη με στοιχεία 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χαρακτηριστικά και το .sr-onlyβοηθητικό πρόγραμμα.
<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">«</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">»</span>
<span class="sr-only">Next</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" 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>Μπορείτε προαιρετικά να ανταλλάξετε ενεργές ή απενεργοποιημένες άγκυρες για <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">
<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>Κόλλα
Θέλετε μεγαλύτερη ή μικρότερη σελιδοποίηση; Προσθέστε .pagination-lgή .pagination-smγια επιπλέον μεγέθη.
<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>Ευθυγραμμία
Αλλάξτε την ευθυγράμμιση των στοιχείων σελιδοποίησης με βοηθητικά προγράμματα flexbox .
<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>