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ሲሞክር የ<a> CSS ንብረቱ እስካሁን ደረጃውን ያልጠበቀ እና ለቁልፍ ሰሌዳ አሰሳ መለያ የለውም። ስለዚህ፣ ሁልጊዜም 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>