::eBazar:: Ui Pagination

بررسی اجمالی

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

پیش نمایش
HTML

می‌توانید به‌صورت اختیاری لنگرهای فعال یا غیرفعال را با آن‌ها تعویض کنید <span>برای حذف عملکرد کلیک و جلوگیری از فوکوس صفحه کلید و در عین حال حفظ سبک های مورد نظر، لنگر را در مورد فلش های قبلی/بعدی حذف کنید..

قبلی
1
2(فعلی)
3
بعدی

    <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 <span class="visually-hidden">(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>

    <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 class="visually-hidden">(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 برای اندازه های اضافی.

پیش نمایش
HTML

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

    <!-- pagination: md -->
    <nav aria-label="...">
        <ul class="pagination">
            <li class="page-item active" aria-current="page">
                <span class="page-link">1<span class="visually-hidden">(current)</span></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>

    <!-- pagination: sm -->
    <nav aria-label="...">
        <ul class="pagination pagination-sm">
            <li class="page-item active" aria-current="page">
                <span class="page-link">1<span class="visually-hidden">(current)</span></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

    <!-- pagination: left -->
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-start">
            <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: center -->
    <nav aria-label="Page navigation">
        <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>

    <!-- pagination: right -->
    <nav aria-label="Page navigation">
        <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>

تنظیمات رنگ قالب

برای تنظیمات پویا کلیک کنید

رنگ اصلی
رنگ ثانویه
رنگ نمودار 1
رنگ نمودار 2
رنگ نمودار 3
رنگ نمودار 4
رنگ نمودار 5

تنظیمات فونت

فونت گوگل پاپینس
فونت گوگل اوپن سانس
فونت گوگل مونت
فونت گوگل موتکا

چیدمان کنتراست

فعال کردن حالت تاریک!
فعال کردن کنتراست بالا
فعال کردن حالت چپ چین!