पृष्ठांकन

संबंधित सामग्रीची मालिका अनेक पृष्ठांवर अस्तित्वात आहे हे सूचित करण्यासाठी पृष्ठांकन दर्शवण्यासाठी दस्तऐवजीकरण आणि उदाहरणे.

आढावा

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

संरेखन

फ्लेक्सबॉक्स युटिलिटीसह पृष्ठांकन घटकांचे संरेखन बदला .

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