Source

पृष्ठांकन कइल गइल बा

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

अवलोकन कइल जाव

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