132 lines
4.0 KiB
Python
132 lines
4.0 KiB
Python
import React, { Fragment } from 'react';
|
|
import { Button, Card, CardBody, Row, Col } from 'reactstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import FalconCardHeader from '../common/FalconCardHeader';
|
|
import PageHeader from '../common/PageHeader';
|
|
import FalconEditor from '../common/FalconEditor';
|
|
|
|
const paginationWithTextCode = `<Pagination aria-label="Page navigation example">
|
|
<PaginationItem>
|
|
<PaginationLink 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 href="#">
|
|
Next
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
</Pagination>`;
|
|
const paginationWithIconCode = `<Pagination aria-label="Page navigation example">
|
|
<PaginationItem>
|
|
<PaginationLink first href="#" />
|
|
</PaginationItem>
|
|
<PaginationItem active>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">2</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">3</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink last href="#"/>
|
|
</PaginationItem>
|
|
</Pagination>`;
|
|
|
|
const sizeExamplePaginationCode = `<Fragment>
|
|
<Pagination size="lg" aria-label="Page navigation example">
|
|
<PaginationItem active>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">2</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">3</PaginationLink>
|
|
</PaginationItem>
|
|
</Pagination>
|
|
<Pagination aria-label="Page navigation example">
|
|
<PaginationItem>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem active>
|
|
<PaginationLink href="#">2</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">3</PaginationLink>
|
|
</PaginationItem>
|
|
</Pagination>
|
|
<Pagination size="sm" aria-label="Page navigation example">
|
|
<PaginationItem>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">2</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem active>
|
|
<PaginationLink href="#">3</PaginationLink>
|
|
</PaginationItem>
|
|
</Pagination>
|
|
</Fragment>`;
|
|
|
|
const Paginations = () => {
|
|
return (
|
|
<Fragment>
|
|
<PageHeader
|
|
title="Pagination"
|
|
description="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages."
|
|
className="mb-3"
|
|
>
|
|
<Button
|
|
tag="a"
|
|
href="https://reactstrap.github.io/components/pagination"
|
|
target="_blank"
|
|
color="link"
|
|
size="sm"
|
|
className="pl-0"
|
|
>
|
|
Paginations on reactstrap
|
|
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
|
</Button>
|
|
</PageHeader>
|
|
<Row noGutters>
|
|
<Col lg={6} className="pr-md-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Example with text" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={paginationWithTextCode} />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pl-md-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Example with icon" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={paginationWithIconCode} />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
<Card>
|
|
<FalconCardHeader title="Sizing" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={sizeExamplePaginationCode} />
|
|
</CardBody>
|
|
</Card>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default Paginations;
|