ಪುಟ ವಿನ್ಯಾಸ

ಸಂಬಂಧಿತ ವಿಷಯಗಳ ಸರಣಿಯನ್ನು ಸೂಚಿಸಲು ಪುಟ ವಿನ್ಯಾಸವನ್ನು ತೋರಿಸಲು ದಾಖಲಾತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳು ಬಹು ಪುಟಗಳಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ.

ಅವಲೋಕನ

ನಮ್ಮ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ನಾವು ಸಂಪರ್ಕಿತ ಲಿಂಕ್‌ಗಳ ದೊಡ್ಡ ಬ್ಲಾಕ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ, ಲಿಂಕ್‌ಗಳನ್ನು ಮಿಸ್ ಮಾಡಲು ಕಷ್ಟವಾಗುತ್ತದೆ ಮತ್ತು ಸುಲಭವಾಗಿ ಸ್ಕೇಲೆಬಲ್ ಆಗುವಂತೆ ಮಾಡುತ್ತದೆ-ಎಲ್ಲವೂ ದೊಡ್ಡ ಹಿಟ್ ಪ್ರದೇಶಗಳನ್ನು ಒದಗಿಸುವಾಗ. ಪುಟ ವಿನ್ಯಾಸವನ್ನು ಪಟ್ಟಿ 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

ವರ್ಗವು .disableds ನ ಲಿಂಕ್ 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>