Source

პაგირება

დოკუმენტაცია და მაგალითები გვერდების ჩვენებისთვის, რათა მიუთითებდეს დაკავშირებული შინაარსის სერიას, არსებობს რამდენიმე გვერდზე.

მიმოხილვა

ჩვენ ვიყენებთ დაკავშირებული ბმულების დიდ ბლოკს ჩვენი პაგინაციისთვის, რაც ართულებს ბმულების გამოტოვებას და ადვილად მასშტაბირებას - ეს ყველაფერი მაშინ, როდესაც უზრუნველყოფს დიდი დარტყმის ზონებს. პაგინაცია აგებულია სიის 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">&laquo;</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">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

ინვალიდი და აქტიური ქვეყნები

პაგინაციის ბმულები მორგებულია სხვადასხვა გარემოებებისთვის. გამოიყენეთ .disabledბმულებისთვის, რომლებიც გამოჩნდება დაუწკაპუნებლად და .activeმიმდინარე გვერდის მითითებისთვის.

მიუხედავად იმისა, რომ კლასი.disabled იყენებს s- ის ბმული ფუნქციის გამორთვის pointer-events: noneმცდელობას , ეს CSS თვისება ჯერ არ არის სტანდარტიზებული და არ ითვალისწინებს კლავიატურის ნავიგაციას. როგორც ასეთი, თქვენ ყოველთვის უნდა დაამატოთ გამორთული ბმულები და გამოიყენოთ მორგებული JavaScript, რომ სრულად გამორთოთ მათი ფუნქციონირება.<a>tabindex="-1"

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