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ატრიბუტებით.

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

<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 <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" aria-current="page">
      <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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </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 class="sr-only">(current)</span>
      </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" 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>