reactstrap#Pagination JavaScript Examples
The following examples show how to use
reactstrap#Pagination.
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: Pagenation.js From relay_09 with MIT License | 6 votes |
|
Page = (props) => {
return (
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Example #2
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Pagination</strong>
</h5>
<div className="mb-5">
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first />
</PaginationItem>
<PaginationItem>
<PaginationLink previous />
</PaginationItem>
<PaginationItem active>
<PaginationLink>1</PaginationLink>
</PaginationItem>
<PaginationItem disabled>
<PaginationLink>2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink>3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink>4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink>5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next />
</PaginationItem>
<PaginationItem>
<PaginationLink last />
</PaginationItem>
</Pagination>
</div>
<h5 className="mb-4">
<strong>Sizing</strong>
</h5>
<div className="mb-5">
<Pagination size="lg" aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first />
</PaginationItem>
<PaginationItem>
<PaginationLink previous />
</PaginationItem>
<PaginationItem>
<PaginationLink>1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink>2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink>3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next />
</PaginationItem>
<PaginationItem>
<PaginationLink last />
</PaginationItem>
</Pagination>
</div>
</div>
)
}
Example #3
| Source File: Tables.js From covidsos with MIT License | 5 votes |
|
getNavigation(tableConfig) {
const {currState} = this.state;
const currTableState = currState[tableConfig.key];
return (
<nav>
<Pagination
className="pagination justify-content-end mb-0"
listClassName="justify-content-end mb-0">
<PaginationItem className="disabled">
<PaginationLink
href="#"
onClick={e => {
if (currTableState.currPage > 1) {
currState[tableConfig.key].currPage = currTableState.currPage - 1;
this.setState({currState: currState});
}
e.preventDefault();
}}>
<i className="fas fa-angle-left"/>
<span className="sr-only">Previous</span>
</PaginationLink>
</PaginationItem>
{this.getNavigationPageNums(tableConfig)}
<PaginationItem>
<PaginationLink href="#" onClick={e => {
if (currTableState.currPage < Math.ceil(
currTableState.filteredData.length / tableConfig.pageSize)) {
currState[tableConfig.key].currPage = currTableState.currPage + 1;
this.setState({currState: currState});
}
e.preventDefault();
}}>
<i className="fas fa-angle-right"/>
<span className="sr-only">Next</span>
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
);
}
Example #4
| Source File: Pagination.jsx From nodejs-rest-api-boilerplate with MIT License | 5 votes |
|
render() {
return (
<>
<Col lg="5">
<h3 className="h4 text-success font-weight-bold mb-5">Pagination</h3>
<nav aria-label="Page navigation example" className="mb-4">
<Pagination>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
1
</PaginationLink>
</PaginationItem>
<PaginationItem className="active">
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
5
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
<nav aria-label="Page navigation example">
<Pagination>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
<i className="fa fa-angle-left" />
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
1
</PaginationLink>
</PaginationItem>
<PaginationItem className="active">
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
<i className="fa fa-angle-right" />
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
</Col>
</>
);
}
Example #5
| Source File: SectionProgress.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionProgress() {
const [activeTab, setActiveTab] = React.useState("1");
const toggle = tab => {
if (activeTab !== tab) {
setActiveTab(tab);
}
};
return (
<>
<div className="section">
<Container>
<Row>
<Col md="6">
<div className="title">
<h3>Progress Bar</h3>
<br />
</div>
<Progress
max="100"
value="25"
barClassName="progress-bar-success"
/>
<br />
<Progress max="100" value="50" barClassName="progress-bar-info" />
<br />
<Progress
max="100"
value="100"
barClassName="progress-bar-danger"
/>
<br />
<Progress multi>
<Progress bar max="100" value="15" />
<Progress
bar
barClassName="progress-bar-success"
max="100"
value="30"
/>
<Progress
bar
barClassName="progress-bar-warning"
max="100"
value="20"
/>
</Progress>
</Col>
<Col md="6">
<div className="title">
<h3>Pagination</h3>
<br />
</div>
<nav aria-label="Page navigation example">
<Pagination>
<PaginationItem>
<PaginationLink
aria-label="Previous"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i aria-hidden={true} className="fa fa-angle-left" />
<span className="sr-only">Previous</span>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
aria-label="Next"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i aria-hidden={true} className="fa fa-angle-right" />
<span className="sr-only">Next</span>
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
<br />
<nav aria-label="...">
<Pagination>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
tabIndex="-1"
>
Previous
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
2
</PaginationLink>
</PaginationItem>
<PaginationItem className="active">
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
3 <span className="sr-only">(current)</span>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Next
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
</Col>
</Row>
<br />
<Row>
<Col md="6">
<div className="title">
<h3>Navigation Tabs</h3>
</div>
<div className="nav-tabs-navigation">
<div className="nav-tabs-wrapper">
<Nav id="tabs" role="tablist" tabs>
<NavItem>
<NavLink
className={activeTab === "1" ? "active" : ""}
onClick={() => {
toggle("1");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "2" ? "active" : ""}
onClick={() => {
toggle("2");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "3" ? "active" : ""}
onClick={() => {
toggle("3");
}}
>
Messages
</NavLink>
</NavItem>
</Nav>
</div>
</div>
<TabContent activeTab={activeTab} className="text-center">
<TabPane tabId="1">
<p>
Larger, yet dramatically thinner. More powerful, but
remarkably power efficient. With a smooth metal surface that
seamlessly meets the new Retina HD display.
</p>
</TabPane>
<TabPane tabId="2">
<p>Here is your profile.</p>
</TabPane>
<TabPane tabId="3">
<p>Here are your messages.</p>
</TabPane>
</TabContent>
</Col>
<Col md="6">
<div className="title">
<h3>Labels</h3>
</div>
<label className="label label-default mr-1">Default</label>
<label className="label label-primary mr-1">Primary</label>
<label className="label label-info mr-1">Info</label>
<label className="label label-success mr-1">Success</label>
<label className="label label-warning mr-1">Warning</label>
<label className="label label-danger">Danger</label>
</Col>
</Row>
</Container>
</div>{" "}
</>
);
}
Example #6
| Source File: Tables.js From sofia-react-template with MIT License | 4 votes |
|
Tables = function () {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [firstTable] = useState(mock.firstTable);
const [secondTable] = useState(mock.secondTable);
const [transactions, setTransactions] = useState(mock.transactionsWidget);
const [tasks, setTasks] = useState(mock.tasksWidget);
const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
const [tableDropdownOpen, setTableMenuOpen] = useState(false);
const pageSize = 4;
const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);
const setFirstTablePage = (e, index) => {
e.preventDefault();
setFirstTableCurrentPage(index);
}
const setSecondTablePage = (e, index) => {
e.preventDefault();
setSecondTableCurrentPage(index);
}
const toggle = () => {
setDropdownOpen(!dropdownOpen);
}
const transactionMenuOpen = (id) => {
setTransactions(
transactions.map( transaction => {
if (transaction.id === id) {
transaction.dropdownOpen = !transaction.dropdownOpen;
}
return transaction;
})
)
}
const tableMenuOpen = () => {
setTableMenuOpen(!tableDropdownOpen);
}
const toggleTask = (id) => {
setTasks(
tasks.map( task => {
if (task.id === id) {
task.completed = !task.completed;
}
return task;
})
)
}
return (
<div>
<Row>
<Col>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">States Colors</div>
<div className="d-flex">
<a href="/#"><img src={searchIcon} alt="Search"/></a>
<a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
<a href="/#"><img src={printerIcon} alt="Printer" /></a>
<a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
<a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
</div>
</div>
<div className="widget-table-overflow">
<Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
<thead>
<tr>
<th className={s.checkboxCol}>
<div className="checkbox checkbox-primary">
<input
className="styled"
id="checkbox100"
type="checkbox"
/>
<label for="checkbox100"/>
</div>
</th>
<th className="w-25">NAME</th>
<th className="w-25">COMPANY</th>
<th className="w-25">CITY</th>
<th className="w-25">STATE</th>
</tr>
</thead>
<tbody>
{firstTable
.slice(
firstTableCurrentPage * pageSize,
(firstTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<Label for={item.id} />
</div>
</td>
<td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
<td>{item.company}</td>
<td>{item.city}</td>
<td>{item.state}</td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-borderless" aria-label="Page navigation example">
<PaginationItem disabled={firstTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(firstTablePagesCount)].map((page, i) =>
<PaginationItem active={i === firstTableCurrentPage} key={i}>
<PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Material UI table</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={tableDropdownOpen}
toggle={() => tableMenuOpen()}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="widget-table-overflow">
<Table className="table-striped table-borderless table-hover" responsive>
<thead>
<tr>
<th>
<div className="checkbox checkbox-primary">
<input
id="checkbox200"
className="styled"
type="checkbox"
/>
<label for="checkbox200"/>
</div>
</th>
<th className={s.nameCol}>NAME</th>
<th>EMAIL</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>DATE</th>
<th>CITY</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
{secondTable
.slice(
secondTableCurrentPage * pageSize,
(secondTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<label for={item.id} />
</div>
</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.product}</td>
<td>{item.price}</td>
<td>{item.date}</td>
<td>{item.city}</td>
<td><Badge color={item.color}>{item.status}</Badge></td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-with-border">
<PaginationItem disabled={secondTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(secondTablePagesCount)].map((page, i) =>
<PaginationItem active={i === secondTableCurrentPage} key={i}>
<PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} xl={8} className="pr-grid-col">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Recent transaction</div>
<div>
<ButtonDropdown
isOpen={dropdownOpen}
toggle={toggle}
className=""
>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
{/*<img src="" alt="Filter option"/>*/}
</div>
</div>
<div className={s.widgetContentBlock}>
{transactions.map(item => (
<div key={uuidv4()} className={s.content}>
<div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
<div className="body-3 muted d-none d-md-block">{item.date}</div>
<div className="body-2">{item.price}</div>
<div className="body-3 muted d-none d-lg-block">{item.description}</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={item.dropdownOpen}
toggle={() => transactionMenuOpen(item.id)}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
))}
</div>
</Widget>
</Col>
<Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Tasks</div>
</div>
<div className={s.widgetContentBlock}>
<TaskContainer tasks={tasks} toggleTask={toggleTask} />
</div>
</Widget>
</Col>
</Row>
</Col>
</Row>
</div>
)
}
Example #7
| Source File: Products.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Products" breadcrumbItems={this.state.breadcrumbItems} />
<Detail />
<Row>
<Col xl={3} lg={4}>
<Card>
<CardHeader className="bg-transparent border-bottom">
<h5 className="mb-0">Filters</h5>
</CardHeader>
<CardBody>
<h5 className="font-size-14 mb-3">Categories</h5>
<div id="accordion" className="custom-accordion categories-accordion mb-3">
<div className="categories-group-card">
<Link to="#" onClick={() => this.setState({ electronic: !this.state.electronic, fashion: false, baby: false, fitness: false })} className={this.state.electronic ? "categories-group-list accordian-bg-products" : "categories-group-list"}>
<i className="mdi mdi-desktop-classic font-size-16 align-middle mr-2"></i> Electronic
<i className={this.state.electronic === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.electronic} id="collapseOne">
<div>
<ul className="list-unstyled categories-list mb-0">
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Mobile</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Mobile accessories</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Computers</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Laptops</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Speakers</Link></li>
</ul>
</div>
</Collapse>
</div>
<div className="categories-group-card">
<Link to="#" className={this.state.fashion ? "categories-group-list accordian-bg-products" : "categories-group-list"} onClick={() => this.setState({ fashion: !this.state.fashion, electronic: false, baby: false, fitness: false })}>
<i className="mdi mdi-hanger font-size-16 align-middle mr-2"></i> Fashion
<i className={this.state.fashion === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.fashion} id="collapseTwo">
<div>
<ul className="list-unstyled categories-list mb-0">
<li className="active"><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Clothing</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Footwear</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Watches</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Sportswear</Link></li>
</ul>
</div>
</Collapse>
</div>
<div className="categories-group-card">
<Link to="#" onClick={() => this.setState({ baby: !this.state.baby, fashion: false, electronic: false, fitness: false })} className={this.state.baby ? "categories-group-list accordian-bg-products" : "categories-group-list"} >
<i className="mdi mdi-pinwheel-outline font-size-16 align-middle mr-2"></i> Baby & Kids
<i className={this.state.baby === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.baby} id="collapseThree">
<div>
<ul className="list-unstyled categories-list mb-0">
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Clothing</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Footwear</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Toys</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Baby care</Link></li>
</ul>
</div>
</Collapse>
</div>
<div className="categories-group-card">
<Link to="#" onClick={() => this.setState({ fitness: !this.state.fitness, fashion: false, baby: false, electronic: false })} className={this.state.fitness ? "categories-group-list accordian-bg-products" : "categories-group-list"}>
<i className="mdi mdi-dumbbell font-size-16 align-middle mr-2"></i> Fitness
<i className={this.state.fitness === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.fitness} id="collapseFour">
<div>
<ul className="list-unstyled categories-list mb-0">
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Gym equipment</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Yoga mat</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Dumbbells</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Protein supplements</Link></li>
</ul>
</div>
</Collapse>
</div>
</div>
</CardBody>
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-4">Price</h5>
<br />
<Nouislider range={{ min: 0, max: 600 }} tooltips={true} start={[100, 500]} connect />
</div>
</CardBody>
<div className="custom-accordion">
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-0"><Link to="#" className="text-dark d-block" onClick={() => this.setState({ discount: !this.state.discount })} >Discount <i className={this.state.discount === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>
<Collapse isOpen={this.state.discount} id="collapseExample1">
<div className="mt-4">
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio6" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio6">50% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio5" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio5">40% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio4" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio4">30% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio3" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio3">20% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio2" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio2">10% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio1" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio1">Less than 10%</Label>
</div>
</div>
</Collapse>
</div>
</CardBody>
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-0"><Link to="#" className="text-dark d-block" onClick={() => this.setState({ size: !this.state.size })}>Size <i className={this.state.size === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>
<Collapse isOpen={this.state.size} id="collapseExample2">
<div className="mt-4">
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio1" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio1">X-Large</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio2" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio2">Large</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio3" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio3">Medium</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio4" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio4">Small</Label>
</div>
</div>
</Collapse>
</div>
</CardBody>
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-0"><Link to="#" className="collapsed text-dark d-block" onClick={() => this.setState({ rating: !this.state.rating })}>Customer Rating <i className={this.state.rating === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>
<Collapse isOpen={this.state.rating} id="collapseExample3">
<div className="mt-4">
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio1" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio1">4 <i className="mdi mdi-star text-warning"></i> & Above</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio2" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio2">3 <i className="mdi mdi-star text-warning"></i> & Above</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio3" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio3">2 <i className="mdi mdi-star text-warning"></i> & Above</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio4" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio4">1 <i className="mdi mdi-star text-warning"></i></Label>
</div>
</div>
</Collapse>
</div>
</CardBody>
</div>
</Card>
</Col>
<Col lg={9}>
<Card>
<CardBody>
<div>
<Row>
<Col md={6}>
<div>
<h5>Clothes & Accessories</h5>
<Breadcrumb listClassName="p-0 bg-transparent mb-2">
<BreadcrumbItem ><Link to="#">Fashion</Link></BreadcrumbItem>
<BreadcrumbItem ><Link to="#">Clothing</Link></BreadcrumbItem >
<BreadcrumbItem active>T-shirts</BreadcrumbItem >
</Breadcrumb>
</div>
</Col>
<Col md={6}>
<div className="form-inline float-md-right">
<div className="search-box ml-2">
<div className="position-relative">
<Input type="text" className="form-control rounded" placeholder="Search..." />
<i className="mdi mdi-magnify search-icon"></i>
</div>
</div>
</div>
</Col>
</Row>
<ul className="list-inline my-3 ecommerce-sortby-list">
<li className="list-inline-item"><span className="font-weight-medium font-family-secondary">Sort by:</span></li>
<li className="list-inline-item active ml-1"><Link to="#">Popularity</Link></li>
<li className="list-inline-item ml-1"><Link to="#">Newest</Link></li>
<li className="list-inline-item ml-1"><Link to="#">Discount</Link></li>
</ul>
<Row className="no-gutters">
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-ribbon badge badge-warning">
Trending
</div>
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product1} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Blue color, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Full sleeve T-shirt</Link></h5>
<h5 className="mt-3 mb-0">$240</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-ribbon badge badge-primary">
- 25 %
</div>
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product2} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Half sleeve, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Half sleeve T-shirt </Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$240</del></span>$225</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart text-danger"></i>
</Link>
</div>
<img src={product3} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Green color, Hoodie</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Hoodie (Green)</Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$290</del></span>$275</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product4} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Gray color, Hoodie</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Hoodie (Green)</Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$290</del></span>$275</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart text-danger"></i>
</Link>
</div>
<img src={product5} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Blue color, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Full sleeve T-shirt</Link></h5>
<h5 className="mt-3 mb-0">$242</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-ribbon badge badge-primary">
- 22 %
</div>
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product6} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Black color, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Half sleeve T-shirt </Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$240</del></span>$225</h5>
</div>
</div>
</Col>
</Row>
<Row className="mt-4">
<Col sm={6}>
<div>
<p className="mb-sm-0 mt-2">Page <span className="font-weight-bold">2</span> Of <span className="font-weight-bold">113</span></p>
</div>
</Col>
<Col sm={6}>
<div className="float-sm-right">
<Pagination className="pagination-rounded mb-sm-0">
<PaginationItem disabled>
<PaginationLink href="#" ><i className="mdi mdi-chevron-left"></i></PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" >1</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#" >2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" >3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink hrefo="#" >4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" >5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" ><i className="mdi mdi-chevron-right"></i></PaginationLink>
</PaginationItem>
</Pagination>
</div>
</Col>
</Row>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #8
| Source File: Pagnations.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Pagination>
<PaginationItem>
<PaginationLink previous tag="button" />
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next tag="button" />
</PaginationItem>
</Pagination>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small> disabled and active states</small>
</CardHeader>
<CardBody>
<Pagination>
<PaginationItem disabled>
<PaginationLink previous tag="button" />
</PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next tag="button" />
</PaginationItem>
</Pagination>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small> sizing</small>
</CardHeader>
<CardBody>
<Pagination size="lg">
<PaginationItem>
<PaginationLink previous tag="button" />
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
3
</PaginationLink>
</PaginationItem>
<PaginationItem className="d-none d-sm-block">
<PaginationLink next tag="button" />
</PaginationItem>
</Pagination>
<Pagination>
<PaginationItem>
<PaginationLink previous tag="button" />
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next tag="button" />
</PaginationItem>
</Pagination>
<Pagination size="sm">
<PaginationItem>
<PaginationLink previous tag="button" />
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next tag="button" />
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</div>
);
}
Example #9
| Source File: Tables.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" lg="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Simple Table
</CardHeader>
<CardBody>
<Table responsive>
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samppa Nori</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
<tr>
<td>Estavan Lykos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<Badge color="danger">Banned</Badge>
</td>
</tr>
<tr>
<td>Chetan Mohamed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<Badge color="secondary">Inactive</Badge>
</td>
</tr>
<tr>
<td>Derick Maximinus</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<Badge color="warning">Pending</Badge>
</td>
</tr>
<tr>
<td>Friderik Dávid</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
</tbody>
</Table>
<Pagination>
<PaginationItem>
<PaginationLink previous tag="button"></PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next tag="button"></PaginationLink>
</PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col xs="12" lg="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Striped Table
</CardHeader>
<CardBody>
<Table responsive striped>
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yiorgos Avraamu</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
<tr>
<td>Avram Tarasios</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<Badge color="danger">Banned</Badge>
</td>
</tr>
<tr>
<td>Quintin Ed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<Badge color="secondary">Inactive</Badge>
</td>
</tr>
<tr>
<td>Enéas Kwadwo</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<Badge color="warning">Pending</Badge>
</td>
</tr>
<tr>
<td>Agapetus Tadeáš</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
</tbody>
</Table>
<Pagination>
<PaginationItem disabled><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">1</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" lg="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Condensed Table
</CardHeader>
<CardBody>
<Table responsive size="sm">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carwyn Fachtna</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
<tr>
<td>Nehemiah Tatius</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<Badge color="danger">Banned</Badge>
</td>
</tr>
<tr>
<td>Ebbe Gemariah</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<Badge color="secondary">Inactive</Badge>
</td>
</tr>
<tr>
<td>Eustorgios Amulius</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<Badge color="warning">Pending</Badge>
</td>
</tr>
<tr>
<td>Leopold Gáspár</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
</tbody>
</Table>
<Pagination>
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">1</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
<Col xs="12" lg="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Bordered Table
</CardHeader>
<CardBody>
<Table responsive bordered>
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pompeius René</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
<tr>
<td>Paĉjo Jadon</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<Badge color="danger">Banned</Badge>
</td>
</tr>
<tr>
<td>Micheal Mercurius</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<Badge color="secondary">Inactive</Badge>
</td>
</tr>
<tr>
<td>Ganesha Dubhghall</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<Badge color="warning">Pending</Badge>
</td>
</tr>
<tr>
<td>Hiroto Šimun</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
</tbody>
</Table>
<Pagination>
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">1</PaginationLink>
</PaginationItem>
<PaginationItem className="page-item"><PaginationLink tag="button">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
</Pagination>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Combined All Table
</CardHeader>
<CardBody>
<Table hover bordered striped responsive size="sm">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishnu Serghei</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
<tr>
<td>Zbyněk Phoibos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<Badge color="danger">Banned</Badge>
</td>
</tr>
<tr>
<td>Einar Randall</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<Badge color="secondary">Inactive</Badge>
</td>
</tr>
<tr>
<td>Félix Troels</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<Badge color="warning">Pending</Badge>
</td>
</tr>
<tr>
<td>Aulus Agmundr</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<Badge color="success">Active</Badge>
</td>
</tr>
</tbody>
</Table>
<nav>
<Pagination>
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">1</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
</Pagination>
</nav>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
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 >
);
}
