Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Files
master
Airframe-React/app/routes/Interface/Paginations/Paginations.js
Tomasz Owczarczyk 37092d1d6c Init 
Preview: http://dashboards.webkom.co/react/airframe
2019-08-15 00:54:44 +02:00

572 lines
27 KiB
JavaScript
Executable File
Raw Permalink Blame History

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 = () => (
<React.Fragment>
<Container>
<HeaderMain
title="Paginations"
className="mb-5 mt-4"
/>
{ /* START Header 1 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={1}
title="Paginations"
subTitle={(
<React.Fragment>
Documentation and examples for showing pagination to
indicate a series of related content exists across m
ultiple pages.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 1 */}
{ /* START Section 1 */}
<Row>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Basic Example
<span className="small ml-1 text-muted">
#1.01
</span>
</CardTitle>
<p className="card-text">
Default example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">Previous</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Disabled State
<span className="small ml-1 text-muted">
#1.02
</span>
</CardTitle>
<p className="card-text">
Disabled example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink previous href="#">Previous</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Active State
<span className="small ml-1 text-muted">
#1.03
</span>
</CardTitle>
<p className="card-text">
Active example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">Previous</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
</Row>
{ /* END Section 1 */}
{ /* START Header 2 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={2}
title="Paginations with Icons"
className="mt-5"
subTitle={(
<React.Fragment>
Looking to use an icon or symbol in place of text for some pagination links?
Be sure to provide proper screen reader support with <code>aria</code> attributes and
the <code>.sr-only</code> utility.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 2 */}
{ /* START Section 2 */}
<Row>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Icons
<span className="small ml-1 text-muted">
#2.01
</span>
</CardTitle>
<p className="card-text">
Icons example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
</Pagination>
</CardBody>
</Card>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Icons
<span className="small ml-1 text-muted">
#2.02
</span>
</CardTitle>
<p className="card-text">
Icons example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-chevron-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-chevron-right"></i>
</PaginationLink>
</Pagination>
</CardBody>
</Card>
</Col>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Icons
<span className="small ml-1 text-muted">
#2.03
</span>
</CardTitle>
<p className="card-text">
Icons example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-long-arrow-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-long-arrow-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Icons
<span className="small ml-1 text-muted">
#2.04
</span>
</CardTitle>
<p className="card-text">
Icons example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-angle-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-angle-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Icons
<span className="small ml-1 text-muted">
#2.05
</span>
</CardTitle>
<p className="card-text">
Icons example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-arrow-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-arrow-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Icons
<span className="small ml-1 text-muted">
#2.05
</span>
</CardTitle>
<p className="card-text">
Icons example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-caret-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-caret-right"></i>
</PaginationLink>
</Pagination>
</CardBody>
</Card>
</Col>
</Row>
{ /* END Section 2 */}
{ /* START Header 3 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={4}
title="Paginations Sizes"
className="mt-5"
subTitle={(
<React.Fragment>
Fancy larger or smaller pagination?
Add <code>.pagination-lg</code> or <code>.pagination-sm</code>
for additional sizes.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 3 */}
{ /* START Section 3 */}
<Row>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Large
<span className="small ml-1 text-muted">
#3.01
</span>
</CardTitle>
<p className="card-text">
Large example
</p>
<Pagination aria-label="Page navigation example" size="lg">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-angle-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-angle-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Default
<span className="small ml-1 text-muted">
#3.02
</span>
</CardTitle>
<p className="card-text">
Default example
</p>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-angle-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-angle-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col lg={ 4 }>
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Pagination: Small
<span className="small ml-1 text-muted">
#3.03
</span>
</CardTitle>
<p className="card-text">
Small example
</p>
<Pagination aria-label="Page navigation example" size="sm">
<PaginationItem>
<PaginationLink previous href="#">
<i className="fa fa-fw fa-angle-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#">
<i className="fa fa-fw fa-angle-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
</Row>
{ /* END Section 3 */}
</Container>
</React.Fragment>
);
export default Paginations;
Reference in New Issue View Git Blame Copy Permalink