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" > « </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
वर्ग s ची दुवो कार्यक्षमताय अक्षम करपाचो यत्न करपाक pointer-events: none
वापरता आसतना , <a>
तो 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>