Files
djangocms/static/admin/assets/pug/pages/theme/pagination.pug
T
2024-12-13 08:31:39 +07:00

257 lines
12 KiB
Plaintext

- var theme_customizer = true;
- var sidebar = true;
- var slick = true;
- var header_slider = true;
- var animate = true;
- var scrollbar = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
include ../../components/taptop
// page-wrapper Start
#pageWrapper.page-wrapper.compact-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper
include ../../components/sidebar
.page-body
.container-fluid
.page-title
.row
.col-6
h3
| Pagination
.col-6
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
svg.stroke-icon
use(href='../assets/svg/icon-sprite.svg#stroke-home')
li.breadcrumb-item Bonus Ui
li.breadcrumb-item.active Pagination
// Container-fluid starts
.container-fluid
.row
// simple pagination
.col-xl-6
.card
.card-header
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
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
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
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
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
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