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