reactstrap#PopoverBody JavaScript Examples
The following examples show how to use
reactstrap#PopoverBody.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: MoreInfoPopover.js From Simplify-Testing-with-React-Testing-Library with MIT License | 5 votes |
|
MoreInfoPopover = () => {
const [popoverOpen, setPopoverOpen] = React.useState(false)
const toggle = () => setPopoverOpen(!popoverOpen)
return (
<div style={{ margin: '5px' }}>
<Button id="moreInfo" type="button" color="primary">
More Info
</Button>
<Popover
placement="bottom"
isOpen={popoverOpen}
target="moreInfo"
toggle={toggle}
>
<PopoverHeader>Lorem ipsum</PopoverHeader>
<PopoverBody>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</PopoverBody>
</Popover>
</div>
)
}
Example #2
| Source File: Popovers.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<span>
<Button className="mr-1" color="secondary" id={'Popover-' + this.props.id} onClick={this.toggle}>
{this.props.item.text}
</Button>
<Popover placement={this.props.item.placement} isOpen={this.state.popoverOpen} target={'Popover-' + this.props.id} toggle={this.toggle} trigger="legacy" delay={0}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
</span>
);
}
Example #3
| Source File: Popovers.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Button id="Popover1" onClick={this.toggle}>
Launch Popover
</Button>
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<small> list</small>
</CardHeader>
<CardBody>
{this.state.popovers.map((popover, i) => {
return <PopoverItem key={i} item={popover} id={i} />;
})}
</CardBody>
</Card>
</div>
);
}
Example #4
| Source File: SectionJavaScript.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionJavaScript() {
const [modal, setModal] = React.useState(false);
const toggleModal = () => {
setModal(!modal);
};
return (
<>
<div className="section javascript-components">
<Container>
<div className="title">
<h2>Javascript Components</h2>
</div>
<Row id="modals">
<Col md="6">
<div className="title">
<h3>Modal</h3>
</div>
{/* Button trigger modal */}
<Button
className="btn-round"
color="danger"
outline
type="button"
onClick={toggleModal}
>
Launch demo modal
</Button>
{/* Modal */}
<Modal isOpen={modal} toggle={toggleModal}>
<div className="modal-header">
<button
aria-label="Close"
className="close"
type="button"
onClick={toggleModal}
>
<span aria-hidden={true}>×</span>
</button>
<h5
className="modal-title text-center"
id="exampleModalLabel"
>
Modal title
</h5>
</div>
<div className="modal-body">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of
the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary
regelialia. It is a paradisematic country, in which roasted
parts of sentences fly into your mouth. Even the all-powerful
Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text
by the name of Lorem Ipsum decided to leave for the far World
of Grammar.
</div>
<div className="modal-footer">
<div className="left-side">
<Button
className="btn-link"
color="default"
type="button"
onClick={toggleModal}
>
Never mind
</Button>
</div>
<div className="divider" />
<div className="right-side">
<Button className="btn-link" color="danger" type="button">
Delete
</Button>
</div>
</div>
</Modal>
</Col>
<Col md="6">
<div className="title">
<h3>Popovers</h3>
</div>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip344834141"
outline
onClick={e => e.target.focus()}
>
On top
</Button>
<UncontrolledPopover
placement="top"
target="tooltip344834141"
trigger="focus"
>
<PopoverHeader>Popover on top</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip493417725"
outline
onClick={e => e.target.focus()}
>
On bottom
</Button>
<UncontrolledPopover
placement="bottom"
target="tooltip493417725"
trigger="focus"
>
<PopoverHeader>Popover on bottom</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip746845223"
outline
onClick={e => e.target.focus()}
>
On left
</Button>
<UncontrolledPopover
placement={window.innerWidth < 768 ? "top" : "left"}
target="tooltip746845223"
trigger="focus"
>
<PopoverHeader>Popover on left</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
<Button
className="btn-round"
color="danger"
id="tooltip909471006"
outline
onClick={e => e.target.focus()}
>
On right
</Button>
<UncontrolledPopover
placement={window.innerWidth < 768 ? "top" : "right"}
target="tooltip909471006"
trigger="focus"
>
<PopoverHeader>Popover on right</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
</Col>
<br />
<Col md="6">
<div className="title">
<h3>Datepicker</h3>
</div>
<Row>
<Col sm="6">
<FormGroup>
<InputGroup className="date" id="datetimepicker">
<ReactDatetime
inputProps={{
placeholder: "Datetime Picker Here"
}}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<span className="glyphicon glyphicon-calendar">
<i aria-hidden={true} className="fa fa-calendar" />
</span>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
</Row>
</Col>
<Col md="6">
<div className="title">
<h3>Tooltips</h3>
</div>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip392938669"
outline
>
On left
</Button>
<UncontrolledTooltip
delay={0}
placement="left"
target="tooltip392938669"
>
On left
</UncontrolledTooltip>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip354225297"
outline
>
On right
</Button>
<UncontrolledTooltip
delay={0}
placement="right"
target="tooltip354225297"
>
On right
</UncontrolledTooltip>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip739061283"
outline
>
On top
</Button>
<UncontrolledTooltip
delay={0}
placement="top"
target="tooltip739061283"
>
On top
</UncontrolledTooltip>
<Button
className="btn-round"
color="danger"
id="tooltip984013562"
outline
>
On bottom
</Button>
<UncontrolledTooltip
delay={0}
placement="bottom"
target="tooltip984013562"
>
On bottom
</UncontrolledTooltip>
</Col>
</Row>
<div className="title">
<h3>Carousel</h3>
</div>
</Container>
</div>{" "}
</>
);
}
Example #5
| Source File: Day.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
const { day, selected } = this.props;
return (
<div className={
`${s.day}` +
(day.isToday ? ` ${s.today}` : "") +
(day.isCurrentMonth ? "" : ` ${s.differentMonth}`) +
(day.date.isSame(selected) ? ` ${s.selected}` : "") +
(day.hasEvents ? ` ${s.hasEvents}` : "") } >
{!day.hasEvents ?
<div className={s.dayNumber}>{day.number}</div>
: (day.hasEvents && day.link)
?
<React.Fragment>
<a
rel="noopener noreferrer"
target="_blank"
onMouseEnter={this.toggleTooltip}
onMouseOut={this.toggleTooltip}
id={`Tooltip${day.number}`}
href={day.link ? day.link : "#"}
className={s.dayNumber}> {day.number}
{day.itemStyle ?
<span
style={{backgroundColor: `${day.itemStyle}`}}
className={s.calendarDot}>
</span> : "" }
</a>
<Tooltip
placement="top"
isOpen={this.state.tooltipShow}
toggle={this.toggleTooltip}
target={`Tooltip${day.number}`}>
{day.title}
</Tooltip>
</React.Fragment>
: (day.hasEvents && !day.link)
?
<React.Fragment>
<div
onClick={this.togglePopover}
id={`Popover${day.number}`}
className={s.dayNumber}> {day.number}
{day.itemStyle ?
<span
style={{backgroundColor: `${day.itemStyle}`}}
className={s.calendarDot}>
</span> : "" }
</div>
<Popover
placement="top"
isOpen={this.state.popoverShow}
target={`Popover${day.number}`}
toggle={this.togglePopover}>
<PopoverHeader>{day.title}</PopoverHeader>
<PopoverBody>{day.info}</PopoverBody>
</Popover>
</React.Fragment>
: "" }
</div>
);
}
Example #6
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { popoverOpen } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Popovers</strong>
</h5>
<div className="mb-5">
<Button id="Popover1" type="button" color="primary">
Launch Popover
</Button>
<Popover placement="bottom" isOpen={popoverOpen} target="Popover1" toggle={this.toggle}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
</div>
<h5 className="mb-4">
<strong>Popovers Trigger</strong>
</h5>
<div className="mb-5">
<Button id="PopoverFocus" type="button" color="light">
Launch Popover (Focus)
</Button>{' '}
<Button id="PopoverClick" type="button" color="light">
Launch Popover (Click)
</Button>{' '}
<Button id="PopoverLegacy" type="button" color="light">
Launch Popover (Legacy)
</Button>
<UncontrolledPopover trigger="focus" placement="bottom" target="PopoverFocus">
<PopoverHeader>Focus Trigger</PopoverHeader>
<PopoverBody>
Focusing on the trigging element makes this popover appear. Blurring (clicking away)
makes it disappear. You cannot select this text as the popover will disappear when you
try.
</PopoverBody>
</UncontrolledPopover>
<UncontrolledPopover trigger="click" placement="bottom" target="PopoverClick">
<PopoverHeader>Click Trigger</PopoverHeader>
<PopoverBody>
Clicking on the triggering element makes this popover appear. Clicking on it again
will make it disappear. You can select this text, but clicking away (somewhere other
than the triggering element) will not dismiss this popover.
</PopoverBody>
</UncontrolledPopover>
<UncontrolledPopover trigger="legacy" placement="bottom" target="PopoverLegacy">
<PopoverHeader>Legacy Trigger</PopoverHeader>
<PopoverBody>
Legacy is a reactstrap special trigger value (outside of bootstraps spec/standard).
Before reactstrap correctly supported click and focus, it had a hybrid which was very
useful and has been brought back as trigger=legacy. One advantage of the legacy
trigger is that it allows the popover text to be selected while also closing when
clicking outside the triggering element and popover itself.
</PopoverBody>
</UncontrolledPopover>
</div>
</div>
)
}
Example #7
| Source File: TooltipPopover.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h3 className="h4 text-success font-weight-bold mt-md mb-4">
Tooltips & Popovers
</h3>
<Row>
<Col lg="6">
<small className="d-block text-uppercase font-weight-bold mb-3">
Tooltips
</small>
<Button
className="btn-tooltip"
color="primary"
id="tooltip38321129"
size="sm"
>
On left
</Button>
<UncontrolledTooltip
delay={0}
placement="left"
target="tooltip38321129"
trigger="hover focus"
>
Tooltip on left
</UncontrolledTooltip>
<Button
className="btn-tooltip"
color="primary"
id="tooltip556394744"
size="sm"
>
On top
</Button>
<UncontrolledTooltip
delay={0}
placement="top"
target="tooltip556394744"
trigger="hover focus"
>
Tooltip on top
</UncontrolledTooltip>
<Button
className="btn-tooltip"
color="primary"
id="tooltip613577679"
size="sm"
>
On bottom
</Button>
<UncontrolledTooltip
delay={0}
placement="bottom"
target="tooltip613577679"
trigger="hover focus"
>
Tooltip on bottom
</UncontrolledTooltip>
<Button
className="btn-tooltip"
color="primary"
id="tooltip476554683"
size="sm"
>
On right
</Button>
<UncontrolledTooltip
delay={0}
placement="right"
target="tooltip476554683"
trigger="hover focus"
>
Tooltip on right
</UncontrolledTooltip>
</Col>
<Col className="mt-4 mt-lg-0" lg="6">
<small className="d-block text-uppercase font-weight-bold mb-3">
Popovers
</small>
<Button color="default" id="tooltip391311689" size="sm">
On left
</Button>
<UncontrolledPopover
trigger="focus"
placement="left"
target="tooltip391311689"
>
<PopoverHeader>Popover On Left</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button color="default" id="tooltip62844899" size="sm">
On top
</Button>
<UncontrolledPopover
trigger="focus"
placement="top"
target="tooltip62844899"
>
<PopoverHeader>Popover on Top</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button color="default" id="tooltip969535472" size="sm">
On right
</Button>
<UncontrolledPopover
trigger="focus"
placement="right"
target="tooltip969535472"
>
<PopoverHeader>Popover on Right</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button color="default" id="tooltip60850592" size="sm">
On bottom
</Button>
<UncontrolledPopover
trigger="focus"
placement="bottom"
target="tooltip60850592"
>
<PopoverHeader>Popover on Bottom</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
</Col>
</Row>
</>
);
}
Example #8
| Source File: Rename.js From hivemind with Apache License 2.0 | 3 votes |
|
export default function Rename({
rootNode,
nameChangedCallBack,
disabled = false,
}) {
const { user } = useUser()
const [popoverOpen, setPopoverOpen] = useState(false)
const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')
const [name, setName] = useState()
const [rev, setRev] = useState()
const inputRef = useRef(null)
const handleSubmit = async (event) => {
event.preventDefault()
setSpinnerDisplay('d-block')
const { data: result, ok, status } = await fetcher(
`/api/mindmaps`,
user.token,
'PATCH',
JSON.stringify({
name: name,
_id: rootNode._id,
_rev: rev,
})
)
const options = {
place: 'tr',
autoDismiss: 7,
}
if (ok) {
setRev(result._rev)
mutate(
[`/api/timeline/events?key=${rootNode._key}`, user.token],
null,
true
)
options.message = 'Renamed mindmap!'
options.type = 'success'
setPopoverOpen(false)
if (nameChangedCallBack) {
nameChangedCallBack(name)
}
} else {
options.message = `Failed to rename mindmap! - ${JSON.stringify(
result || status
)}`
options.type = 'danger'
}
setSpinnerDisplay('d-none')
if (window.notify) {
window.notify(options)
}
}
useEffect(() => {
setName(rootNode.name)
setRev(rootNode._rev)
}, [rootNode])
useEffect(() => {
if (popoverOpen && inputRef.current) {
inputRef.current.focus()
}
}, [popoverOpen])
return (
<>
<ToolTippedButton
tooltip="Rename"
className="ml-1"
outline
color={disabled ? 'secondary' : 'primary'}
id="rename"
disabled={disabled}
>
<Edit3 size={16} />
</ToolTippedButton>
<Popover
target="rename"
isOpen={popoverOpen}
toggle={() => setPopoverOpen(!popoverOpen)}
boundariesElement={'rename'}
placement={'bottom-end'}
>
<PopoverHeader>
Rename <small>{rootNode.name}</small>
</PopoverHeader>
<PopoverBody>
<Card>
<CardBody>
<CardText tag="div">
<Form onSubmit={handleSubmit} inline>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input
type="text"
name="name"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
autoComplete="off"
required
innerRef={inputRef}
/>
<Button
className="ml-1"
onSubmit={handleSubmit}
color="primary"
id="save"
>
<Save /> Save
</Button>
</FormGroup>
<FormGroup className={spinnerDisplay}>
<Spinner />
</FormGroup>
</Form>
</CardText>
</CardBody>
</Card>
</PopoverBody>
</Popover>
</>
)
}
Example #9
| Source File: index.js From hivemind with Apache License 2.0 | 3 votes |
|
Page = () => {
const { user } = useUser()
const { data, error } = useFetch(user, '/api/mindmaps')
const inputRef = useRef(null)
const [name, setName] = useState('')
const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')
const [popoverOpen, setPopoverOpen] = useState(false)
const toggle = () => {
setPopoverOpen(!popoverOpen)
if (inputRef.current) {
inputRef.current.focus()
}
}
if (typeof user === 'undefined') {
return <Spinner />
}
if (error && window.notify) {
const options = {
place: 'tr',
message: 'Failed to fetch mind maps!',
type: 'danger',
autoDismiss: 7,
}
window.notify(options)
}
if (user) {
const handleChange = (event) => setName(event.target.value)
const handleSubmit = async (event) => {
event.preventDefault()
setSpinnerDisplay('d-block')
const { data: result, ok } = await fetcher(
'/api/mindmaps',
user.token,
'POST',
JSON.stringify({ name })
)
const options = {
place: 'tr',
autoDismiss: 7,
}
if (ok) {
options.message = 'Added mindmap!'
options.type = 'success'
setName('')
mutate(['/api/mindmaps', user.token])
setPopoverOpen(false)
} else {
options.message = `Failed to add mindmap! - ${JSON.stringify(result)}`
options.type = 'danger'
}
setSpinnerDisplay('d-none')
if (window.notify) {
window.notify(options)
}
}
const output = [
<Row key="title">
<Col xs="auto">
<h3>My Mind Maps</h3>
</Col>
<Col xs="auto">
<Button color="success" size="sm" id="create">
<Plus /> Create
</Button>
<Popover
placement="bottom"
target="create"
isOpen={popoverOpen}
toggle={toggle}
>
<PopoverHeader>Create Mind Map</PopoverHeader>
<PopoverBody>
<Form onSubmit={handleSubmit} inline>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input
type="text"
name="name"
id="name"
placeholder="Type a name and hit ⏎"
value={name}
onChange={handleChange}
required
maxLength="20"
autoComplete="off"
innerRef={inputRef}
/>
</FormGroup>
<FormGroup className={spinnerDisplay}>
<Spinner />
</FormGroup>
</Form>
</PopoverBody>
</Popover>
</Col>
</Row>,
]
output.push(
<Row key="content">
<Col>
{data && !error ? <MindMaps data={data.data} /> : <Spinner />}
</Col>
</Row>
)
return output
}
return <AuthPrompt />
}
Example #10
| Source File: UiGeneral.js From gedge-platform with Apache License 2.0 | 3 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="General" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<Row>
<Col lg={6}>
<div>
<h4 className="card-title">Badges</h4>
<p className="card-title-desc">Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
<div>
<Badge color="primary" className="mr-1">Primary</Badge>
<Badge color="success" className="mr-1">Success</Badge>
<Badge color="info" className="mr-1">Info</Badge>
<Badge color="warning" className="mr-1">Warning</Badge>
<Badge color="danger" className="mr-1">Danger</Badge>
<Badge color="dark" className="mr-1">Dark</Badge>
</div>
<div className="mt-1">
<Badge className="badge-soft-primary mr-1">Primary</Badge>
<Badge className="badge-soft-success mr-1">Success</Badge>
<Badge className="badge-soft-info mr-1">Info</Badge>
<Badge className="badge-soft-warning mr-1">Warning</Badge>
<Badge className="badge-soft-danger mr-1">Danger</Badge>
<Badge className="badge-soft-dark mr-1">Dark</Badge>
</div>
</div>
</Col>
<Col lg={6}>
<div className="mt-4 mt-lg-0">
<h4 className="card-title">Pill badges</h4>
<p className="card-title-desc">Use the <code>.badge-pill</code> modifier class to make
badges more rounded (with a larger <code>border-radius</code>
and additional horizontal <code>padding</code>).
Useful if you miss the badges from v3.</p>
<div>
<Badge color="primary" pill className="mr-1">Primary</Badge>
<Badge color="success" pill className="mr-1">Success</Badge>
<Badge color="info" pill className="mr-1">Info</Badge>
<Badge color="warning" pill className="mr-1">Warning</Badge>
<Badge color="danger" pill className="mr-1">Danger</Badge>
<Badge color="dark" pill className="mr-1">Dark</Badge>
</div>
<div className="mt-1">
<Badge pill className="badge-soft-primary mr-1">Primary</Badge>
<Badge pill className="badge-soft-success mr-1">Success</Badge>
<Badge pill className="badge-soft-info mr-1">Info</Badge>
<Badge pill className="badge-soft-warning mr-1">Warning</Badge>
<Badge pill className="badge-soft-danger mr-1">Danger</Badge>
<Badge pill className="badge-soft-dark mr-1">Dark</Badge>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Popovers</h4>
<p className="card-title-desc">Add small overlay content, like those found in iOS, to any element for housing secondary information.</p>
<div className="button-items">
<Button type="button" color="light" id="Popovertop" className="waves-effect mr-1" >
Popover on top
</Button>
<Popover placement="top" isOpen={this.state.popovertop} target="Popovertop" toggle={this.toggletop}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Button type="button" id="Popoverright" color="light" className="waves-effect mr-1">
Popover on right
</Button>
<Popover placement="right" isOpen={this.state.popoverright} target="Popoverright" toggle={this.toggleright}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Button type="button" id="Popoverbottom" color="light" className="waves-effect mr-1">
Popover on bottom
</Button>
<Popover placement="bottom" isOpen={this.state.popoverbottom} target="Popoverbottom" toggle={this.togglebottom}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Button type="button" id="Popoverleft" color="light" className="waves-effect mr-1">
Popover on left
</Button>
<Popover placement="left" isOpen={this.state.popoverleft} target="Popoverleft" toggle={this.toggleleft}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Button type="button" color="success" id="popover5" className="waves-effect waves-light">Dismissible popover</Button>
<UncontrolledPopover trigger="focus" target="popover5" placement="right">
<PopoverHeader>
Dismissible popover
</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus
</PopoverBody>
</UncontrolledPopover>
</div>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Tooltips</h4>
<p className="card-title-desc">Hover over the links below to see tooltips:</p>
<div className="button-items">
<Tooltip placement="top" isOpen={this.state.tttop} target="TooltipTop" toggle={() => this.setState({ tttop: !this.state.tttop })}>Hello world!</Tooltip>
<Tooltip placement="right" isOpen={this.state.ttright} target="TooltipRight" toggle={() => this.setState({ ttright: !this.state.ttright })}>Hello world!</Tooltip>
<Tooltip placement="bottom" isOpen={this.state.ttbottom} target="TooltipBottom" toggle={() => this.setState({ ttbottom: !this.state.ttbottom })}>Hello world!</Tooltip>
<Tooltip placement="left" isOpen={this.state.ttleft} target="TooltipLeft" toggle={() => this.setState({ ttleft: !this.state.ttleft })}>Hello world!</Tooltip>
<Button type="button" color="primary" className="mr-1" id="TooltipTop"> Tooltip on top</Button>
<Button type="button" color="primary" className="mr-1" id="TooltipRight"> Tooltip on Right</Button>
<Button type="button" color="primary" className="mr-1" id="TooltipBottom"> Tooltip on Bottom</Button>
<Button type="button" color="primary" className="mr-1" id="TooltipLeft"> Tooltip on Left</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={12}>
<Card>
<CardBody>
<h4 className="card-title mb-4">Pagination</h4>
<Row>
<Col lg={6}>
<h5 className="font-size-14">Default Example</h5>
<p className="card-title-desc">Pagination links indicate a series of related content exists across multiple pages.</p>
<Pagination aria-label="Page navigation example">
<PaginationItem><PaginationLink href="#">Previous</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">Next</PaginationLink></PaginationItem>
</Pagination>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink href="#" previous>
<i className="mdi mdi-chevron-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>
<i className="mdi mdi-chevron-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
</Col>
<Col lg={6}>
<div className="mt-4 mt-lg-0">
<h5 className="font-size-14">Disabled and active states</h5>
<p className="card-title-desc">Pagination links are customizable for
different circumstances. Use <code>.disabled</code> for links that appear
un-clickable and <code>.active</code> to
indicate the current page.</p>
<Pagination aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink href="#">2 <span className="sr-only">(current)</span></PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
<Pagination aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink><i className="mdi mdi-chevron-left"></i></PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink>
2
<span className="sr-only">(current)</span>
</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#"><i className="mdi mdi-chevron-right"></i></PaginationLink>
</PaginationItem>
</Pagination>
</div>
</Col>
</Row>
<Row>
<Col lg={6}>
<div className="mt-4">
<h5 className="font-size-14">Sizing</h5>
<p className="card-title-desc">Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional
sizes.</p>
<Pagination size="lg" aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
<Pagination size="sm" aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
</div>
</Col>
<Col lg={6}>
<div className="mt-4">
<h5 className="card-title">Alignment</h5>
<p className="card-title-desc">Change the alignment of pagination
components with flexbox utilities.</p>
<Pagination aria-label="Page navigation example" listClassName="justify-content-center">
<PaginationItem disabled>
<PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
<Pagination aria-label="Page navigation example" listClassName="justify-content-end">
<PaginationItem disabled>
<PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
</div>
</Col>
</Row>
<Row className=" mt-4">
<Col lg={6}>
<h5 className="font-size-14">Rounded Example</h5>
<p className="card-title-desc">Add <code>.pagination-rounded</code> for rounded pagination.</p>
<Pagination aria-label="Page navigation example" className="pagination-rounded">
<PaginationItem disabled>
<PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink href="#">2 <span className="sr-only">(current)</span></PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#">Next</PaginationLink>
</PaginationItem>
</Pagination>
<Pagination aria-label="Page navigation example" className="pagination-rounded">
<PaginationItem disabled>
<span className="page-link"><i className="mdi mdi-chevron-left"></i></span>
</PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem active>
<span className="page-link">
2
<span className="sr-only">(current)</span>
</span>
</PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#"><i className="mdi mdi-chevron-right"></i></PaginationLink>
</PaginationItem>
</Pagination>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Border spinner</h4>
<p className="card-title-desc">Use the border spinners for a lightweight loading indicator.</p>
<div>
<Spinner className="mr-2" color="primary" />
<Spinner className="mr-2" color="secondary" />
<Spinner className="mr-2" color="success" />
<Spinner className="mr-2" color="danger" />
<Spinner className="mr-2" color="warning" />
<Spinner className="mr-2" color="info" />
<Spinner className="mr-2" color="light" />
<Spinner className="mr-2" color="dark" />
</div>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Growing spinner</h4>
<p className="card-title-desc">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
<div>
<Spinner type="grow" className="mr-2" color="primary" />
<Spinner type="grow" className="mr-2" color="secondary" />
<Spinner type="grow" className="mr-2" color="success" />
<Spinner type="grow" className="mr-2" color="danger" />
<Spinner type="grow" className="mr-2" color="warning" />
<Spinner type="grow" className="mr-2" color="info" />
<Spinner type="grow" className="mr-2" color="light" />
<Spinner type="grow" className="mr-2" color="dark" />
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment >
);
}
