booking/assets/pug/pages/theme/pagination.pug
2025-03-24 22:58:00 +03:00

250 lines
14 KiB
Plaintext

- var theme_customizer = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
// page-wrapper Start
#pageWrapper.page-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper.horizontal-menu
include ../../components/sidebar
.page-body
.container-fluid
.page-header
.row
.col-sm-6
h3
| Pagination
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Advance
li.breadcrumb-item.active Pagination
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
// simple pagination
.col-xl-6
.card
.card-header.pb-0
h5 Pagination
.card-body
nav(aria-label='Page navigation example')
ul.pagination.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// pagination with icons
.col-xl-6
.card
.card-header.pb-0
h5 Pagination with icons
.card-body
nav(aria-label='Page navigation example')
ul.pagination.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)', aria-label='Previous')
span(aria-hidden='true') «
span.sr-only Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)', aria-label='Next')
span(aria-hidden='true') »
span.sr-only Next
// pagination alignment left
.col-xl-12
.card
.card-header.pb-0
h5 Pagination alignment
.card-body
// left aligned pagination
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// center aligned pagination
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.justify-content-center.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// right aligned pagination
nav(aria-label='Page navigation example')
ul.pagination.justify-content-end.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// pagination with active and disabled state
.col-xl-12
.card
.card-header.pb-0
h5 Pagination with active and disabled
.card-body
nav(aria-label='...')
ul.pagination.pagination-primary
li.page-item.disabled
a.page-link(href='javascript:void(0)', tabindex='-1') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item.active
a.page-link(href='javascript:void(0)')
| 2
span.sr-only (current)
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// pagination Color
.col-xl-12
.card
.card-header.pb-0
h5 Pagination Color
.card-body
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-secondary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-success
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-info
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-warning
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
nav(aria-label='Page navigation example')
ul.pagination.pagination-danger
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// pagination sizing
.col-xl-12
.card
.card-header.pb-0
h5 Pagination sizing
.card-body
// large size pagination
nav.m-b-30(aria-label='Page navigation example')
ul.pagination.pagination-lg.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// small size pagination
nav(aria-label='Page navigation example')
ul.pagination.pagination-sm.pagination-primary
li.page-item
a.page-link(href='javascript:void(0)') Previous
li.page-item
a.page-link(href='javascript:void(0)') 1
li.page-item
a.page-link(href='javascript:void(0)') 2
li.page-item
a.page-link(href='javascript:void(0)') 3
li.page-item
a.page-link(href='javascript:void(0)') Next
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files