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>

संरेखण

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>