ਪੰਨਾ ਨੰਬਰ

ਕਈ ਪੰਨਿਆਂ ਵਿੱਚ ਸੰਬੰਧਿਤ ਸਮਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨਾ ਨੰਬਰ ਦਿਖਾਉਣ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਅਸੀਂ ਆਪਣੇ ਪੰਨਿਆਂ ਲਈ ਕਨੈਕਟ ਕੀਤੇ ਲਿੰਕਾਂ ਦੇ ਇੱਕ ਵੱਡੇ ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਲਿੰਕਾਂ ਨੂੰ ਖੁੰਝਣ ਲਈ ਔਖਾ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਮਾਪਣਯੋਗ ਬਣਾਉਂਦੇ ਹਾਂ - ਇਹ ਸਭ ਵੱਡੇ ਹਿੱਟ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ। ਪੰਨਾ ਨੰਬਰ ਸੂਚੀ 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 ਕਰਨ ਲਈ ਵਰਤਦੀ ਹੈ , ਉਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਅਜੇ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਖਾਤਾ ਨਹੀਂ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾ ਅਯੋਗ ਲਿੰਕਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।<a>tabindex="-1"

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

ਅਲਾਈਨਮੈਂਟ

ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਪੰਨਾਬੰਦੀ ਭਾਗਾਂ ਦੀ ਇਕਸਾਰਤਾ ਨੂੰ ਬਦਲੋ ।

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