ਪੰਨਾ ਨੰਬਰ
ਕਈ ਪੰਨਿਆਂ ਵਿੱਚ ਸੰਬੰਧਿਤ ਸਮਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨਾ ਨੰਬਰ ਦਿਖਾਉਣ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।
ਸੰਖੇਪ ਜਾਣਕਾਰੀ
ਅਸੀਂ ਆਪਣੇ ਪੰਨਿਆਂ ਲਈ ਕਨੈਕਟ ਕੀਤੇ ਲਿੰਕਾਂ ਦੇ ਇੱਕ ਵੱਡੇ ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਲਿੰਕਾਂ ਨੂੰ ਖੁੰਝਣ ਲਈ ਔਖਾ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਮਾਪਣਯੋਗ ਬਣਾਉਂਦੇ ਹਾਂ - ਇਹ ਸਭ ਵੱਡੇ ਹਿੱਟ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ। ਪੰਨਾ ਨੰਬਰ ਸੂਚੀ 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
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਨਾਲ ਸਹੀ ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।
<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 ਵਿਸ਼ੇਸ਼ਤਾ ਅਜੇ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਖਾਤਾ ਨਹੀਂ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾ ਅਯੋਗ ਲਿੰਕਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।<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>
ਅਲਾਈਨਮੈਂਟ
ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਪੰਨਾਬੰਦੀ ਭਾਗਾਂ ਦੀ ਇਕਸਾਰਤਾ ਨੂੰ ਬਦਲੋ ।
<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);
}
}
}
}