صفحه بندی
اسناد و نمونه هایی برای نمایش صفحه بندی برای نشان دادن یک سری محتوای مرتبط در چندین صفحه وجود دارد.
بررسی اجمالی
ما از بلوک بزرگی از پیوندهای متصل برای صفحهبندی خود استفاده میکنیم، که باعث میشود لینکها به سختی از دست بروند و به راحتی مقیاسپذیر شوند—همه اینها در حالی که مناطق بازدید بزرگی را فراهم میکنند. صفحه بندی با عناصر لیست 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
می کند<a>
، این ویژگی CSS هنوز استاندارد نشده است و ناوبری صفحه کلید را در نظر نمی گیرد. به این ترتیب، همیشه باید tabindex="-1"
پیوندهای غیرفعال را اضافه کنید و از جاوا اسکریپت سفارشی برای غیرفعال کردن کامل عملکرد آنها استفاده کنید.
<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>
، یا در مورد فلشهای قبلی/بعدی، لنگر را حذف کنید تا عملکرد کلیک را حذف کنید و از فوکوس صفحه کلید با حفظ سبکهای مورد نظر جلوگیری کنید.
<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">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">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);
}
}
}
}