ገጽ ምሃብ
ተኸታታሊ ተዛመድቲ ትሕዝቶታት ንምምልካት ገጻት ንምርኣይ ዝሕግዙ ሰነዳትን ኣብነታትን ኣብ ብዙሓት ገጻት ኣለዉ።
ሓፈሻዊ ትሕዝቶ
ንገጽና ዝኸውን ዓቢ ብሎክ ናይ ዝተኣሳሰሩ መላግቦታት ንጥቀም፣ እዚ ድማ ንመላግቦታት ንምስኣን ኣጸጋሚን ብቐሊሉ ዝዓቢን ይገብሮ-እዚ ኩሉ ዓበይቲ ዝተሃርመ ቦታታት እናሃበና። ገጽ ምሃብ ብናይ ዝርዝር ኤችቲኤምኤል ባእታታት ዝተሃንጸ እዩ ስለዚ ኣንበብቲ ስክሪን ብዝሒ ናይቶም ዘለዉ መላግቦታት ከበስሩ ይኽእሉ። <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">«</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">»</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</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>
</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>
</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>
</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>
ሳስ
ተለዋዋጢ ረቛሒታት
$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-color: $link-color;
$pagination-bg: $white;
$pagination-border-width: $border-width;
$pagination-border-radius: $border-radius;
$pagination-margin-start: -$pagination-border-width;
$pagination-border-color: $gray-300;
$pagination-focus-color: $link-hover-color;
$pagination-focus-bg: $gray-200;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow;
$pagination-focus-outline: 0;
$pagination-hover-color: $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) {
.page-link {
padding: $padding-y $padding-x;
@include font-size($font-size);
}
.page-item {
@if $pagination-margin-start == (-$pagination-border-width) {
&:first-child {
.page-link {
@include border-start-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-end-radius($border-radius);
}
}
} @else {
//Add border-radius to all pageLinks in case they have left margin
.page-link {
@include border-radius($border-radius);
}
}
}
}