Tomasz Owczarczyk
284
app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js
Executable file
284
app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js
Executable file
@@ -0,0 +1,284 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
CardText,
|
||||
UncontrolledTooltip,
|
||||
UncontrolledPopover,
|
||||
PopoverHeader,
|
||||
PopoverBody
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const TooltipsPopovers = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Tooltips & Popovers"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Tooltips Examples"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
A rendered modal with header, body, and set of actions in the footer.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardText>
|
||||
Tight pants next level keffiyeh <a href="#" id="UncontrolledTooltip1">you probably</a> haven't heard of them.
|
||||
Photo booth beard raw denim letterpress vegan messenger bag stumptown.
|
||||
Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
|
||||
apparel <a href="#" id="UncontrolledTooltip2">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans
|
||||
banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
|
||||
mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" id="UncontrolledTooltip3">whatever keytar</a>,
|
||||
scenester farm-to-table banksy Austin <a href="#" id="UncontrolledTooltip4">twitter handle</a> freegan cred raw denim
|
||||
single-origin coffee viral.
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip1">
|
||||
Default Tooltip
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip2">
|
||||
Another Tooltip
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip3">
|
||||
Another one here too
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip4">
|
||||
The last tip!
|
||||
</UncontrolledTooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Tooltips Demos"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Four options are available: <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> aligned.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Top
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipTop">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltipTop">
|
||||
Tooltip Top
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Right
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipRight">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="right" target="UncontrolledTooltipRight">
|
||||
Tooltip Right
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Bottom
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipBottom">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="UncontrolledTooltipBottom">
|
||||
Tooltip Bottom
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Left
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipLeft">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="left" target="UncontrolledTooltipLeft">
|
||||
Tooltip Left
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Popovers Examples"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Four options are available: <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> aligned.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Top
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverTop">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="top" target="UncontrolledPopoverTop">
|
||||
<PopoverHeader>
|
||||
Top Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Right
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverRight">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="right" target="UncontrolledPopoverRight">
|
||||
<PopoverHeader>
|
||||
Right Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Bottom
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverBottom">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="bottom" target="UncontrolledPopoverBottom">
|
||||
<PopoverHeader>
|
||||
Bottom Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Left
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverLeft">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="left" target="UncontrolledPopoverLeft">
|
||||
<PopoverHeader>
|
||||
Left Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default TooltipsPopovers;
|
||||
Reference in New Issue
Block a user