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ምስ ባህርያት ግቡእ ናይ ስክሪን ሪደር ደገፍ ምሃብካ ኣረጋግጽ ።

<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 ንብረት ገና ደረጃ ዘለዎ ኣይኮነን፡ ንናይ ቁልፊ ሰሌዳ ምድህሳስ ድማ ኣይሕተትን እዩ። ከምኡ ስለዝኾነ ድማ ኩሉ ግዜ ኣብ ዝተሰናኸሉ መላግቦታት ክትውስኽን ብሕታዊ ጃቫስክሪፕት ተጠቒምካ ምሉእ ብምሉእ ተግባራቶም ከተሰናኽልን ይግባእ።<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>

ኣሰላልፋ

ኣሰላልፋ ናይ ገጽ ምጽሓፍ ኣካላት ምስ 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" 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>