import React from 'react';
import {
Container,
Row,
Col,
Card,
CardTitle,
CardBody,
Pagination,
PaginationItem,
PaginationLink
} from './../../../components';
import { HeaderMain } from "../../components/HeaderMain";
import { HeaderDemo } from "../../components/HeaderDemo";
const Paginations = () => (
{ /* START Header 1 */}
Documentation and examples for showing pagination to
indicate a series of related content exists across m
ultiple pages.
)}
/>
{ /* END Header 1 */}
{ /* START Section 1 */}
Pagination: Basic Example
#1.01
Default example
Previous
1
2
3
Next
Pagination: Disabled State
#1.02
Disabled example
Previous
1
2
3
Next
Pagination: Active State
#1.03
Active example
Previous
1
2
3
Next
{ /* END Section 1 */}
{ /* START Header 2 */}
Looking to use an icon or symbol in place of text for some pagination links?
Be sure to provide proper screen reader support with aria attributes and
the .sr-only utility.
)}
/>
{ /* END Header 2 */}
{ /* START Section 2 */}
Pagination: Icons
#2.01
Icons example
1
2
3
Pagination: Icons
#2.02
Icons example
1
2
3
Pagination: Icons
#2.03
Icons example
1
2
3
Pagination: Icons
#2.04
Icons example
1
2
3
Pagination: Icons
#2.05
Icons example
1
2
3
Pagination: Icons
#2.05
Icons example
1
2
3
{ /* END Section 2 */}
{ /* START Header 3 */}
Fancy larger or smaller pagination?
Add .pagination-lg or .pagination-sm
for additional sizes.
)}
/>
{ /* END Header 3 */}
{ /* START Section 3 */}
Pagination: Large
#3.01
Large example
1
2
3
Pagination: Default
#3.02
Default example
1
2
3
Pagination: Small
#3.03
Small example
1
2
3
{ /* END Section 3 */}
);
export default Paginations;