122 lines
4.3 KiB
JavaScript
122 lines
4.3 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { CCard, CCardBody, CCardHeader, CPagination, CPaginationItem } from '@coreui/react-ts'
|
|
import { DocsLink } from 'src/reusable'
|
|
|
|
const Paginations = () => {
|
|
const [currentPage, setCurrentPage] = useState(2)
|
|
|
|
return (
|
|
<>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Pagination
|
|
<DocsLink name="CPagination" />
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CPagination>
|
|
<CPaginationItem>Previous</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem>Next</CPaginationItem>
|
|
</CPagination>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Pagination
|
|
<small>with icons</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CPagination>
|
|
<CPaginationItem aria-label="previous">
|
|
<span aria-hidden="true">«</span>
|
|
</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem aria-label="next">
|
|
<span aria-hidden="true">»</span>
|
|
</CPaginationItem>
|
|
</CPagination>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Pagination
|
|
<small>with icons</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CPagination ariaLabel="Page navigation example">
|
|
<CPaginationItem ariaLabel="Previous" disabled>
|
|
<span aria-hidden="true">«</span>
|
|
</CPaginationItem>
|
|
<CPaginationItem active>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem ariaLabel="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</CPaginationItem>
|
|
</CPagination>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Pagination
|
|
<small>sizing</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CPagination size="lg" ariaLabel="Page navigation example">
|
|
<CPaginationItem>Previous</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem>Next</CPaginationItem>
|
|
</CPagination>
|
|
<hr />
|
|
<CPagination size="sm" ariaLabel="Page navigation example">
|
|
<CPaginationItem>Previous</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem>Next</CPaginationItem>
|
|
</CPagination>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Pagination
|
|
<small>alignment</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CPagination className="justify-content-start" ariaLabel="Page navigation example">
|
|
<CPaginationItem disabled>Previous</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem>Next</CPaginationItem>
|
|
</CPagination>
|
|
<hr />
|
|
<CPagination className="justify-content-center" ariaLabel="Page navigation example">
|
|
<CPaginationItem disabled>Previous</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem>Next</CPaginationItem>
|
|
</CPagination>
|
|
<hr />
|
|
<CPagination className="justify-content-end" ariaLabel="Page navigation example">
|
|
<CPaginationItem disabled>Previous</CPaginationItem>
|
|
<CPaginationItem>1</CPaginationItem>
|
|
<CPaginationItem>2</CPaginationItem>
|
|
<CPaginationItem>3</CPaginationItem>
|
|
<CPaginationItem>Next</CPaginationItem>
|
|
</CPagination>
|
|
</CCardBody>
|
|
</CCard>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Paginations
|