ፔጅኒሽን

ተከታታይ ተዛማጅ ይዘቶችን ለማመልከት ፔጃኒሽን ለማሳየት ሰነዶች እና ምሳሌዎች በበርካታ ገፆች ላይ አሉ።

በዚህ ገጽ ላይ

አጠቃላይ እይታ

ለገጻችን ትልቅ ብሎክ የተገናኙ ሊንኮችን እንጠቀማለን፣ ሊንኮች ለመጥፋት አስቸጋሪ እና በቀላሉ ሊለኩ የሚችሉ ያደርጋቸዋል—ሁሉም ትልቅ የተጎዱ አካባቢዎችን በማቅረብ ላይ። ገጽ አንባቢዎች የሚገኙትን ማገናኛዎች ቁጥር እንዲያሳውቁ በኤችቲኤምኤል ዝርዝር ክፍሎች የተገነባ ነው። <nav>አንባቢዎችን እና ሌሎች አጋዥ ቴክኖሎጂዎችን ለማጣራት እንደ የአሰሳ ክፍል ለመለየት የመጠቅለያ ክፍል ይጠቀሙ ።

በተጨማሪም፣ ገፆች ከአንድ በላይ የመዳሰሻ ክፍል ስላላቸው፣ አላማውን እንዲያንፀባርቅ ገላጭ ቢያቀርቡ aria-labelይመረጣል <nav>። ለምሳሌ፣ የገጽታ ክፍሉ በፍለጋ ውጤቶች ስብስብ መካከል ለመዳሰስ የሚያገለግል ከሆነ፣ ተገቢው መለያ ሊሆን ይችላል aria-label="Search results pages"።

html

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

html

<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ሲሞክር የ<a> CSS ንብረቱ እስካሁን ደረጃውን ያልጠበቀ እና ለቁልፍ ሰሌዳ አሰሳ መለያ የለውም። ስለዚህ፣ ሁልጊዜም tabindex="-1"በተሰናከሉ አገናኞች ላይ ማከል እና ተግባራቸውን ሙሉ በሙሉ ለማሰናከል ብጁ ጃቫ ስክሪፕትን መጠቀም አለቦት።

html

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">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</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>, ወይም በቀደሙት/ቀጣዮቹ ቀስቶች ሁኔታ መልህቁን መተው ይችላሉ, የጠቅ ተግባርን ለማስወገድ እና የታቀዱ ቅጦችን በመያዝ የቁልፍ ሰሌዳ ትኩረትን ለመከላከል.

html

<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>
    </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ለተጨማሪ መጠኖች.

html

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</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>

html

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</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 መገልገያዎች ጋር አሰላለፍ ይለውጡ ። ለምሳሌ፣ .justify-content-centerበ

html

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">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>

ወይም በ .justify-content-end:

html

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">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>

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የBootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ ፔጅኔሽን አሁን .paginationለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢ CSS ተለዋዋጮችን ይጠቀማል። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass ተለዋዋጮች

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           ($pagination-border-width * -1);
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

የሳስ ቅልቅል

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}