Pagination | سیستم طراحی سپانو

Pagination

در سیستم طراحی سپانو دیتا انواع Pagination‌ها عبارتند از :

Lightmode, Darkmode

pagination light mode

pagination dark mode

مشخصات کلی

تمامی Paginationها برای دو حالت تاریک و روشن صفحه طراحی شده‌اند.

استفاده از هر نوع از Pagination‌ها بنا به اهمیت آن‌ها است.

منابع

خروجی فیگما سیستم طراحی سپانو

فایل فیگما سیستم طراحی سپانو دسترسی کامل به تمامی کامپوننت‌ها و شیوه‌نامه‌های سیستم طراحی سپانوwest

خروجی لوگو سپانو دیتا

فایل لوگو سپانو دیتا دریافت لوگو رسمی و سازمانی سپانو دیتاwest

Pagination

رنگ

Hex	Element
#DEF8EB	1. Conainer Color
#1AAB66	2. Icon Color
#1AAB66	3. Selected color
#1AAB66	4. Text Color
#B4E7CE	5. stroke Color
#30A16B	6. Text color

Hex	Element
#2E3A34	1. Conainer Color
#3ECF8A	2. Icon Color
#3ECF8A	3. Selected color
#2E3A34	4. Text Color
#53665D	5. stroke Color
#93C7AE	6. Text color

چیدمان

Pagination

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
<nav aria-label="sdp pagination">
    <ul class="pagination sdp-pagination" dir="ltr">
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link d-flex justify-content-center align-items-center" href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link" href="#">1</a>
        </li>
        <li class="page-item sdp-page-item active">
            <a class="page-link sdp-page-link" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link" href="#">3</a>
        </li>
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link d-flex justify-content-center align-items-center" href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


                                                            
.sdp-pagination {
    margin: 1rem;
}

.page-item {
    min-height: 32px !important;
    min-width: 32px !important;
    text-align: center;
}


.page-link.sdp-page-link {
    padding: 0.25rem;
    background: #DEF8EB;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px !important;
    color: #0A592B;
    border: 0;
    font-weight: 700;
}

.page-link.sdp-page-link:hover {
    background: #C0FFDA;
    color: #0A592B;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-link.sdp-page-link:focus {
    z-index: 3;
    color: #0A592B;
    background-color: #8DFFBD;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item {
    margin: 0 0.25rem;
}

.page-item.sdp-page-item.active a.page-link.sdp-page-link {
    z-index: 3;
    color: #DEF8EB;
    background-color: #0A592B;
    border-color: black;
}

.page-item.sdp-page-item.active a.page-link.sdp-page-link:hover {
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item.active a.page-link.sdp-page-link:focus {
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

Pagination (Dark)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
<div class="dark">
  <nav aria-label="sdp pagination">
    <ul class="pagination sdp-pagination" dir="ltr">
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link d-flex justify-content-center align-items-center" href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link" href="#">1</a>
        </li>
        <li class="page-item sdp-page-item active">
            <a class="page-link sdp-page-link" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link" href="#">3</a>
        </li>
        <li class="page-item sdp-page-item">
            <a class="page-link sdp-page-link d-flex justify-content-center align-items-center" href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
  </nav>
</div>


                                                            
.sdp-pagination {
    margin: 1rem;
}

.page-item {
    min-height: 32px !important;
    min-width: 32px !important;
    text-align: center;
}

.dark .page-link.sdp-page-link {
    padding: 0.25rem;
    background: #2E3A34;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px !important;
    color: #3ECF8A;
    border: 0;
    font-weight: 700;
}

.dark .page-link.sdp-page-link:hover {
    background: #8DFFBD;
    color: #08381C;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.dark .page-item.sdp-page-item.active a.page-link.sdp-page-link {
    z-index: 3;
    color: #2E3A34;
    background-color: #3ECF8A;
    border-color: black;
}

Pagination (Stuck)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        


//light
<nav aria-label="...">
    <ul class="pagination sdp-pagination-light" dir="ltr">
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">1</a></li>
        <li class="page-item sdp-page-item-light active">
            <a class="page-link sdp-page-link-light" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">3</a></li>
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


//dark
<nav aria-label="...">
    <ul class="pagination sdp-pagination-dark" dir="ltr">
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">1</a></li>
        <li class="page-item sdp-page-item-dark active">
            <a class="page-link sdp-page-link-dark" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">3</a></li>
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


                                                            
.page-item{
    min-height: 36px;
    min-width: 36px;
    text-align: center;
}

//light
.page-link.sdp-page-link-light {
    background: #DEF8EB;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #1AAB66;
    border: 0;
}

.page-link.sdp-page-link-light:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-light.active>a.page-link.sdp-page-link-light {
    z-index: 3 !important;
    color: #DEF8EB !important;
    background-color: #1AAB66 !important;
    border-color: black !important;
}

.page-link.sdp-page-link-light:focus {
    z-index: 3;
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}


//dark
.page-link.sdp-page-link-dark {
    background: #2E3A34;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #3ECF8A;
    border: 0;
}

.page-link.sdp-page-link-dark:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-dark.active>a.page-link.sdp-page-link-dark {
    color: #2E3A34 !important;
    background-color: #3ECF8A !important;
    border-color: black !important;
}

.page-link.sdp-page-link-dark:focus {
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.pagination-left-radius {
    border-radius: 5px 0px 0px 5px !important;
}

.pagination-middle-radius {
    border-radius: 0 !important;
}

.pagination-right-radius {
    border-radius: 0px 5px 5px 0px !important;
}

Pagination (Stuck Dark)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        


//light
<nav aria-label="...">
    <ul class="pagination sdp-pagination-light" dir="ltr">
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">1</a></li>
        <li class="page-item sdp-page-item-light active">
            <a class="page-link sdp-page-link-light" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">3</a></li>
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


//dark
<nav aria-label="...">
    <ul class="pagination sdp-pagination-dark" dir="ltr">
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">1</a></li>
        <li class="page-item sdp-page-item-dark active">
            <a class="page-link sdp-page-link-dark" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">3</a></li>
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


                                                            
.page-item{
    min-height: 36px;
    min-width: 36px;
    text-align: center;
}

//light
.page-link.sdp-page-link-light {
    background: #DEF8EB;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #1AAB66;
    border: 0;
}

.page-link.sdp-page-link-light:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-light.active>a.page-link.sdp-page-link-light {
    z-index: 3 !important;
    color: #DEF8EB !important;
    background-color: #1AAB66 !important;
    border-color: black !important;
}

.page-link.sdp-page-link-light:focus {
    z-index: 3;
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}


//dark
.page-link.sdp-page-link-dark {
    background: #2E3A34;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #3ECF8A;
    border: 0;
}

.page-link.sdp-page-link-dark:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-dark.active>a.page-link.sdp-page-link-dark {
    color: #2E3A34 !important;
    background-color: #3ECF8A !important;
    border-color: black !important;
}

.page-link.sdp-page-link-dark:focus {
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.pagination-left-radius {
    border-radius: 5px 0px 0px 5px !important;
}

.pagination-middle-radius {
    border-radius: 0 !important;
}

.pagination-right-radius {
    border-radius: 0px 5px 5px 0px !important;
}

Pagination (date)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        


//light
<nav aria-label="...">
    <ul class="pagination sdp-pagination-light" dir="ltr">
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">1</a></li>
        <li class="page-item sdp-page-item-light active">
            <a class="page-link sdp-page-link-light" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">3</a></li>
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


//dark
<nav aria-label="...">
    <ul class="pagination sdp-pagination-dark" dir="ltr">
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">1</a></li>
        <li class="page-item sdp-page-item-dark active">
            <a class="page-link sdp-page-link-dark" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">3</a></li>
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


                                                            
.page-item{
    min-height: 36px;
    min-width: 36px;
    text-align: center;
}

//light
.page-link.sdp-page-link-light {
    background: #DEF8EB;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #1AAB66;
    border: 0;
}

.page-link.sdp-page-link-light:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-light.active>a.page-link.sdp-page-link-light {
    z-index: 3 !important;
    color: #DEF8EB !important;
    background-color: #1AAB66 !important;
    border-color: black !important;
}

.page-link.sdp-page-link-light:focus {
    z-index: 3;
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}


//dark
.page-link.sdp-page-link-dark {
    background: #2E3A34;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #3ECF8A;
    border: 0;
}

.page-link.sdp-page-link-dark:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-dark.active>a.page-link.sdp-page-link-dark {
    color: #2E3A34 !important;
    background-color: #3ECF8A !important;
    border-color: black !important;
}

.page-link.sdp-page-link-dark:focus {
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.pagination-left-radius {
    border-radius: 5px 0px 0px 5px !important;
}

.pagination-middle-radius {
    border-radius: 0 !important;
}

.pagination-right-radius {
    border-radius: 0px 5px 5px 0px !important;
}

Pagination (Stuck with date Dark)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        


//light
<nav aria-label="...">
    <ul class="pagination sdp-pagination-light" dir="ltr">
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">1</a></li>
        <li class="page-item sdp-page-item-light active">
            <a class="page-link sdp-page-link-light" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-light"><a
                class="page-link sdp-page-link-light" href="#">3</a></li>
        <li class="page-item sdp-page-item-light">
            <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


//dark
<nav aria-label="...">
    <ul class="pagination sdp-pagination-dark" dir="ltr">
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_left</span>
            </a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">1</a></li>
        <li class="page-item sdp-page-item-dark active">
            <a class="page-link sdp-page-link-dark" href="#">2</a>
        </li>
        <li class="page-item sdp-page-item-dark"><a
                class="page-link sdp-page-link-dark" href="#">3</a></li>
        <li class="page-item sdp-page-item-dark">
            <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center"
                href="#">
                <span class="material-icons">chevron_right</span>
            </a>
        </li>
    </ul>
</nav>


                                                            
.page-item{
    min-height: 36px;
    min-width: 36px;
    text-align: center;
}

//light
.page-link.sdp-page-link-light {
    background: #DEF8EB;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #1AAB66;
    border: 0;
}

.page-link.sdp-page-link-light:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-light.active>a.page-link.sdp-page-link-light {
    z-index: 3 !important;
    color: #DEF8EB !important;
    background-color: #1AAB66 !important;
    border-color: black !important;
}

.page-link.sdp-page-link-light:focus {
    z-index: 3;
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}


//dark
.page-link.sdp-page-link-dark {
    background: #2E3A34;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #3ECF8A;
    border: 0;
}

.page-link.sdp-page-link-dark:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-dark.active>a.page-link.sdp-page-link-dark {
    color: #2E3A34 !important;
    background-color: #3ECF8A !important;
    border-color: black !important;
}

.page-link.sdp-page-link-dark:focus {
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.pagination-left-radius {
    border-radius: 5px 0px 0px 5px !important;
}

.pagination-middle-radius {
    border-radius: 0 !important;
}

.pagination-right-radius {
    border-radius: 0px 5px 5px 0px !important;
}

Pagination

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
    //light
    <nav aria-label="...">
        <ul class="pagination sdp-pagination-light" dir="ltr">
            <li class="page-item sdp-page-item-light mx-2">
                <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center" href="#">
                    <span class="material-icons">chevron_left</span>
                    <span>قبلی</span>
                </a>
            </li>
            <li class="page-item sdp-page-item-light"><a class="page-link sdp-page-link-light pagination-left-radius" href="#">1</a></li>
            <li class="page-item sdp-page-item-light active">
                <a class="page-link sdp-page-link-light pagination-middle-radius" href="#">2</a>
            </li>
            <li class="page-item sdp-page-item-light"><a class="page-link sdp-page-link-light pagination-right-radius" href="#">...</a></li>
            <li class="page-item sdp-page-item-light"><a class="page-link sdp-page-link-light pagination-right-radius" href="#">4</a></li>
            <li class="page-item sdp-page-item-light mx-2">
                <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center" href="#">
                    <span>بعدی</span>
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>

    //dark
    <nav aria-label="...">
        <ul class="pagination sdp-pagination-dark" dir="ltr">
            <li class="page-item sdp-page-item-dark mx-2">
                <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center" href="#">
                    <span class="material-icons">chevron_left</span>
                    <span>قبلی</span>
                </a>
            </li>
            <li class="page-item sdp-page-item-dark"><a class="page-link sdp-page-link-dark pagination-left-radius" href="#">1</a></li>
            <li class="page-item sdp-page-item-dark active">
                <a class="page-link sdp-page-link-dark pagination-middle-radius" href="#">2</a>
            </li>
            <li class="page-item sdp-page-item-dark"><a class="page-link sdp-page-link-dark pagination-right-radius" href="#">...</a></li>
            <li class="page-item sdp-page-item-dark"><a class="page-link sdp-page-link-dark pagination-right-radius" href="#">4</a></li>
            <li class="page-item sdp-page-item-dark mx-2">
                <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center" href="#">
                    <span>بعدی</span>
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>


                                                            
.page-item{
    min-height: 36px;
    min-width: 36px;
    text-align: center;
}

//light
.page-link.sdp-page-link-light {
    background: #DEF8EB;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #1AAB66;
    border: 0;
}

.page-link.sdp-page-link-light:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-light.active>a.page-link.sdp-page-link-light {
    z-index: 3 !important;
    color: #DEF8EB !important;
    background-color: #1AAB66 !important;
    border-color: black !important;
}

.page-link.sdp-page-link-light:focus {
    z-index: 3;
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}


//dark
.page-link.sdp-page-link-dark {
    background: #2E3A34;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #3ECF8A;
    border: 0;
}

.page-link.sdp-page-link-dark:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-dark.active>a.page-link.sdp-page-link-dark {
    color: #2E3A34 !important;
    background-color: #3ECF8A !important;
    border-color: black !important;
}

.page-link.sdp-page-link-dark:focus {
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.pagination-left-radius {
    border-radius: 5px 0px 0px 5px !important;
}

.pagination-middle-radius {
    border-radius: 0 !important;
}

.pagination-right-radius {
    border-radius: 0px 5px 5px 0px !important;
}

Pagination

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
    //light
    <nav aria-label="...">
        <ul class="pagination sdp-pagination-light" dir="ltr">
            <li class="page-item sdp-page-item-light mx-2">
                <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center" href="#">
                    <span class="material-icons">chevron_left</span>
                    <span>قبلی</span>
                </a>
            </li>
            <li class="page-item sdp-page-item-light"><a class="page-link sdp-page-link-light pagination-left-radius" href="#">1</a></li>
            <li class="page-item sdp-page-item-light active">
                <a class="page-link sdp-page-link-light pagination-middle-radius" href="#">2</a>
            </li>
            <li class="page-item sdp-page-item-light"><a class="page-link sdp-page-link-light pagination-right-radius" href="#">...</a></li>
            <li class="page-item sdp-page-item-light"><a class="page-link sdp-page-link-light pagination-right-radius" href="#">4</a></li>
            <li class="page-item sdp-page-item-light mx-2">
                <a class="page-link sdp-page-link-light d-flex justify-content-center align-items-center" href="#">
                    <span>بعدی</span>
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>

    //dark
    <nav aria-label="...">
        <ul class="pagination sdp-pagination-dark" dir="ltr">
            <li class="page-item sdp-page-item-dark mx-2">
                <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center" href="#">
                    <span class="material-icons">chevron_left</span>
                    <span>قبلی</span>
                </a>
            </li>
            <li class="page-item sdp-page-item-dark"><a class="page-link sdp-page-link-dark pagination-left-radius" href="#">1</a></li>
            <li class="page-item sdp-page-item-dark active">
                <a class="page-link sdp-page-link-dark pagination-middle-radius" href="#">2</a>
            </li>
            <li class="page-item sdp-page-item-dark"><a class="page-link sdp-page-link-dark pagination-right-radius" href="#">...</a></li>
            <li class="page-item sdp-page-item-dark"><a class="page-link sdp-page-link-dark pagination-right-radius" href="#">4</a></li>
            <li class="page-item sdp-page-item-dark mx-2">
                <a class="page-link sdp-page-link-dark d-flex justify-content-center align-items-center" href="#">
                    <span>بعدی</span>
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>


                                                            
.page-item{
    min-height: 36px;
    min-width: 36px;
    text-align: center;
}

//light
.page-link.sdp-page-link-light {
    background: #DEF8EB;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #1AAB66;
    border: 0;
}

.page-link.sdp-page-link-light:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-light.active>a.page-link.sdp-page-link-light {
    z-index: 3 !important;
    color: #DEF8EB !important;
    background-color: #1AAB66 !important;
    border-color: black !important;
}

.page-link.sdp-page-link-light:focus {
    z-index: 3;
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}


//dark
.page-link.sdp-page-link-dark {
    background: #2E3A34;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #3ECF8A;
    border: 0;
}

.page-link.sdp-page-link-dark:hover {
    background: #65CA9A;
    color: #0B1C28;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item-dark.active>a.page-link.sdp-page-link-dark {
    color: #2E3A34 !important;
    background-color: #3ECF8A !important;
    border-color: black !important;
}

.page-link.sdp-page-link-dark:focus {
    color: #0B1C28;
    background-color: #65CA9A;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.pagination-left-radius {
    border-radius: 5px 0px 0px 5px !important;
}

.pagination-middle-radius {
    border-radius: 0 !important;
}

.pagination-right-radius {
    border-radius: 0px 5px 5px 0px !important;
}

موارد استفاده

کامپوننت Pagination برای تقسیم محتوا یا داده‌ها به چندین صفحه با قابلیت پیمایش در آن‌ها استفاده می‌شود.
در صورتی که تعداد آیتم‌هایی که در هر صفحه نمایش داده می‌شوند زیاد باشد، می‌توانید از کامپوننت Pagination برای صفحه‌بندی کردن آن استفاده کنید.
تعداد محتوای نمایش داده شده در هر صفحه، به نوع محتوا و صفحه‌بندی آن بستگی دارد.

موارد استفاده هدایت کننده ها دستور العمل

نکات کلی

به صورت واضح، مشخص کنید که کاربر در کدام صفحه قرار دارد.
تعداد کل صفحات را به کاربر نمایش دهید.
چنانچه تعداد صفحات زیاد است، مطمئن شوید که کاربر به راحتی می‌تواند به اولین و آخرین صفحه مراجعه کند.

موارد استفاده هدایت کننده ها دستور العمل