पृष्ठ पर अंक लगाना

संबंधित सामग्री की एक श्रृंखला को इंगित करने के लिए पेजिनेशन दिखाने के लिए दस्तावेज़ीकरण और उदाहरण कई पृष्ठों में मौजूद हैं।

अवलोकन

हम अपने पेजिनेशन के लिए कनेक्टेड लिंक्स के एक बड़े ब्लॉक का उपयोग करते हैं, जिससे लिंक्स को मिस करना मुश्किल हो जाता है और आसानी से स्केलेबल हो जाता है - सभी बड़े हिट क्षेत्र प्रदान करते हुए। पृष्ठ पर अंक लगाना सूची 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वर्ग एस की लिंक कार्यक्षमता को अक्षम करने का प्रयास करने के लिए pointer-events: noneउपयोग करता<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>

संरेखण

फ्लेक्सबॉक्स उपयोगिताओं के साथ पेजिनेशन घटकों के संरेखण को बदलें ।

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