reactstrap#Popover JavaScript Examples
The following examples show how to use
reactstrap#Popover.
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: 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 #5
| 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 #6
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
AppModuleHeader = (props) => {
const [searchBox, setSearchBox] = useState(false);
const [popoverOpen, setPopOverOpen] = useState(false);
const onSearchBoxSelect = () => {
setSearchBox(!searchBox);
};
const toggle = () => {
setPopOverOpen(!popoverOpen)
};
const {placeholder, onChange, value, user, notification, apps} = props;
return (
<div className="module-box-header-inner" data-test="container-component">
<div className="search-bar right-side-icon bg-transparent d-none d-sm-block">
<div className="form-group">
<input className="form-control border-0" type="search" placeholder={placeholder}
data-test="input-component"
onChange={onChange}
value={value}/>
<button className="search-icon"><i className="zmdi zmdi-search zmdi-hc-lg"/></button>
</div>
</div>
<Popover className="p-3" placement="bottom" isOpen={popoverOpen} target="Popover1"
toggle={toggle} data-test="popover-component">
<h3>{user.name}</h3>
<h4>{user.email}</h4>
</Popover>
<div className="d-inline-block d-sm-none">
<Dropdown data-test="dropdown-component"
className="quick-menu nav-searchbox"
isOpen={searchBox}
toggle={onSearchBoxSelect}>
<DropdownToggle
className="d-inline-block"
tag="span"
data-toggle="dropdown">
<IconButton className="icon-btn">
<i className="zmdi zmdi-search zmdi-hc-fw text-grey"/>
</IconButton>
</DropdownToggle>
<DropdownMenu className="p-0">
<SearchBox styleName="search-dropdown" placeholder="" data-test="search-component"
onChange={onChange}
value={value}/>
</DropdownMenu>
</Dropdown>
</div>
<div className="module-box-header-right">
{apps && <IconButton className="size-40" aria-label="Menu">
<i className="zmdi zmdi-apps"/>
</IconButton>}
{notification && <IconButton className="size-40" aria-label="Menu">
<i className="zmdi zmdi-notifications-none"/>
</IconButton>}
<img className="ml-2 rounded-circle size-40 pointer" id="Popover1" alt={user.name}
data-test="pointer-component"
onMouseEnter={toggle}
onMouseLeave={toggle}
onClick={toggle}
src={user.avatar}/>
</div>
</div>
)
}
Example #7
| 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 #8
| 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 #9
| 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 >
);
}
