पृष्ठांकन करप

संबंदीत सामुग्रीची माळ दाखोवपाक पान दाखोवपाखातीर दस्तावेजीकरण आनी उदाहरणां एका परस चड पानांचेर अस्तित्वांत आसात.

नियाळ

आमी आमच्या पृष्ठांकनाखातीर जोडिल्ल्या दुव्यांचो व्हडलो ब्लॉक वापरतात, दुवे चुकप कठीण आनी सहजपणान मापनीय करतात-सगले व्हड हिट वाठार पुरवण करतना. पृष्ठांकन यादी 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 ची दुवो कार्यक्षमताय अक्षम करपाचो यत्न करपाक 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" 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>