reactstrap#UncontrolledButtonDropdown JavaScript Examples
The following examples show how to use
reactstrap#UncontrolledButtonDropdown.
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: activeAuction.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let box = this.props.box;
return (
<Col key={box.id} xs="12" md="6" lg="6" xl="4">
<PlaceBidModal
isOpen={this.state.bidModal}
box={this.props.box}
close={this.openBid}
assemblerModal={this.props.assemblerModal}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText="current active bid"
/>
<BidHistory
close={this.openDetails}
box={this.props.box}
isOpen={this.state.detailsModal}
/>
<div className="card mb-3 bg-white widget-chart" style={
{
'opacity': this.props.box.isFinished || this.state.loading ? 0.6 : 1
}
}>
<Row style={{marginTop: 8}}>
<Col className="text-truncate">
<b data-tip={this.props.box.tokenName}>{this.props.box.tokenName}</b>
</Col>
{(this.props.box.royalty > 0 || this.props.box.totalIssued > 1) &&
<Col className="text-truncate">
{this.props.box.royalty > 0 &&
<i data-tip={`Includes ${this.props.box.royalty / 10}% royalty on secondary sales`} style={{fontSize: '12px'}}
className="font-weight-light">{`${this.props.box.royalty / 10}% royalty`}</i>}
{this.props.box.totalIssued > 1 &&
<i data-tip={`This is a Fungible Token with total issuance of ${this.props.box.totalIssued}`}
style={{fontSize: '12px'}}
className="font-weight-light">{` - ${this.props.box.assets[0].amount} out of ${this.props.box.totalIssued}`}</i>}</Col>
}
</Row>
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction="left">
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisH}/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-md-left">
<Nav vertical>
<NavItem className="nav-item-header">
General
</NavItem>
<NavItem>
<NavLink
href={
'#/auction/specific/' +
// this.props.box.boxId
(this.props.box.stableId? this.props.box.stableId : this.props.box.boxId)
}
>
Link to Auction
</NavLink>
<NavLink
onClick={() => this.openMyBids()}
>
My Bids
</NavLink>
<NavLink
onClick={() =>
this.setState({
detailsModal: true,
})
}
>
Details
</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={10}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.loading}
/>
</ResponsiveContainer>
<ReactTooltip effect="solid" place="bottom"/>
<ArtworkMedia preload={this.props.preload} box={this.props.box}/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
<div style={textStyle}>{this.props.box.description}</div>
<b
style={{cursor: "pointer"}}
onClick={() => this.props.updateParams('artist', this.props.box.artist)}
>
{' '}- By {friendlyAddress(this.props.box.artist, 5)}
</b>
</p>
</div>
</div>
</div>
<div className='mb-2'>
<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '13px'
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 5)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '13px'
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Bidder{' '}
{friendlyAddress(this.props.box.bidder, 5)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see current bidder's address"
style={{
fontSize: '1rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<FooterSection box={this.props.box} loading={(val) => this.setState({loading: val})}
assemblerModal={this.props.assemblerModal} openBid={this.openBid}/>
</div>
</Col>
);
}
Example #2
| Source File: activeOther.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let box = this.props.box;
return (
<Col key={box.id} lg="6" xl="4" md="6">
<PlaceBidModal
isOpen={this.state.bidModal}
box={this.props.box}
close={this.openBid}
assemblerModal={this.props.assemblerModal}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText="current active bid"
/>
<BidHistory
close={this.openDetails}
box={this.props.box}
isOpen={this.state.detailsModal}
/>
<ArtworkDetails
box={this.props.box}
isOpen={this.state.infoModal}
close={() =>
this.setState({
infoModal: !this.state.infoModal,
})
}
/>
<div className="card mb-3 bg-white widget-chart" style={
{
'opacity': this.props.box.isFinished ? 0.6 : 1
}
}>
<b class="fsize-1 text-truncate" style={{marginTop: 8}}>{this.props.box.tokenName}</b>
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction="left">
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisV}/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-md-left">
<Nav vertical>
<NavItem className="nav-item-header">
General
</NavItem>
<NavItem>
<NavLink
href={
'#/auction/specific/' +
this.props.box.boxId
}
>
Link to Auction
</NavLink>
<NavLink
onClick={() => this.openMyBids()}
>
My Bids
</NavLink>
<NavLink
onClick={() =>
this.setState({
detailsModal: true,
})
}
>
Details
</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={20}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.loading}
/>
</ResponsiveContainer>
<div className="d-inline-flex">
<span className="widget-numbers">
{this.props.box.value / 1e9} ERG
</span>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative justify justify-content-lg-start">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
className="widget-subheading m-1"
>
<span
data-tip={this.props.box.assets[0].tokenId}
>
{friendlyToken(this.props.box.assets[0], true, 8)}
</span>
<i
onClick={() =>
this.showIssuingTx(this.props.box)
}
data-tip="see issuing transaction"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Bidder{' '}
{friendlyAddress(this.props.box.bidder, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see current bidder's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<ReactTooltip effect="solid" place="bottom"/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
flex: 1,
cursor: 'pointer',
justifyContent: 'center',
alignItems: 'center',
height: '100px',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
{this.props.box.description}
<Link
to={'/auction/active?type=other&artist=' + this.props.box.artist}
>
<b
>
{' '}- By {friendlyAddress(this.props.box.artist, 4)}
</b></Link>
</p>
</div>
</div>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative">
<Button
onClick={() => this.openMyBids()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-layers"> </i>
<span>My Bids</span>
</Button>
<Button
onClick={() => this.openBid()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-pencil"> </i>
<span>Place Bid</span>
</Button>
<Button
onClick={() => {
this.setState({detailsModal: true});
}}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-chart-bars"> </i>
<span>Details</span>
</Button>
</div>
<FooterSection box={this.props.box} loading={(val) => this.setState({loading: val})} assemblerModal={this.props.assemblerModal} openBid={this.openBid}/>
</div>
</Col>
);
}
Example #3
| Source File: index.js From ErgoAuctionHouse with MIT License | 4 votes |
|
// setSelectedAuctions(auctions){
// this.setState({loading:true})
// setTimeout(()=>this.setState({selectedAuctions: selectedAuctions,loading:false}),1000) // SetTimeout For better UX
// }
render() {
let values = this.calcValues(this.filterAuctions(this.state.allAuctions))
return (
<Fragment>
<div className="app-page-title">
<div className="page-title-wrapper">
<div className="page-title-heading">
<div
className={cx('page-title-icon', {
'd-none': false,
})}
>
{
this.state.type === "audio" ?
<i className="pe-7s-volume2 icon-gradient bg-night-fade"
style={{fontSize: 56}}/>
:
<i className="pe-7s-photo icon-gradient bg-night-fade" style={{fontSize: 56}}/>
}
</div>
<div>
Active Auctions {this.state.type && this.state.type !== 'all' &&
<text>- {this.state.type}</text>}
<div
className={cx('page-title-subheading', {
'd-none': false,
})}
>
Updated {this.state.lastUpdated}{' '}
seconds ago.
</div>
{this.state.artist && <div
className={cx('page-title-subheading', {
'd-none': false,
})}
>
<b>Artist: {this.friendlyArtist()}</b>
</div>}
<div
className={cx('page-title-subheading', {
'd-none': false,
})}
>
<b>{this.getToShow().length} active auctions with worth of: <br/></b>
<b>{longToCurrency(values.ERG, -1, 'ERG')} <i>ERG</i></b>
{Object.keys(values).filter(key => key !== 'ERG').map(key =>
<b>{', '}{longToCurrency(values[key], -1, key)} <i>{key}</i></b>
)}
</div>
</div>
</div>
<div className="page-title-actions">
<TitleComponent2/>
</div>
</div>
<div>
<Row>
<Col className='text-right'>
<b><a href='https://v1.ergoauctions.org/' target='_blank'>Make sure to check out the V1 auctions!</a></b>
</Col>
</Row>
</div>
</div>
{/*{!this.state.loading && this.getHottest().length > 0 && <div*/}
{/* className="mb-xl-5 card mb-3 bg-white widget-chart"*/}
{/*>*/}
{/* <div className='notArtwork'>*/}
{/* <b className='font-size-xlg text-primary'>Hot auctions</b>*/}
{/* </div>*/}
{/* <Coverflow*/}
{/* className='coverflow'*/}
{/* width={960}*/}
{/* height={550}*/}
{/* displayQuantityOfSide={2}*/}
{/* navigation={false}*/}
{/* enableHeading={true}*/}
{/* enableScroll={false}*/}
{/* >*/}
{/* {this.getHottest().map(hot => {*/}
{/* // return <img style={{position: "relative"}} src={hot.artworkUrl} alt={hot.tokenName}*/}
{/* // data-action={getAuctionUrl(hot.boxId)}/>*/}
{/* return <ArtworkMedia box={hot} height='100%' width='100%'*/}
{/* avoidDetail={true}*/}
{/* avoidFav={true}*/}
{/* alt={hot.tokenName}*/}
{/* data-action={getAuctionUrl(hot.boxId)}/>*/}
{/* })}*/}
{/* /!*data-action="http://tw.yahoo.com"/>*!/*/}
{/* </Coverflow>*/}
{/*</div>}*/}
{!this.state.loading && <div>
<Row>
<Col className='text-right'>
<UncontrolledButtonDropdown>
<DropdownToggle caret outline className="mb-2 mr-2 border-0 font-size-lg"
color="primary">
<i className="nav-link-icon lnr-sort-amount-asc"> </i>
{sortKeyToVal[this.state.sortKey]}
</DropdownToggle>
<DropdownMenu>
{Object.keys(sortKeyToVal).map(sortKey => <DropdownItem
onClick={() => {
// this.sortAuctions([].concat(this.state.auctions), sortKey)
this.updateParams('sortKey', sortKey)
}}>{sortKeyToVal[sortKey]}</DropdownItem>)}
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown>
<DropdownToggle caret outline className="mb-2 mr-2 border-0 font-size-lg"
color="primary">
<i className="nav-link-icon pe-7s-filter"> </i>
{this.state.type}
</DropdownToggle>
<DropdownMenu>
{types.map(type => <DropdownItem
onClick={() => {
// this.sortAuctions([].concat(this.state.auctions), sortKey)
this.updateParams('type', type)
}}>{type}</DropdownItem>)}
</DropdownMenu>
</UncontrolledButtonDropdown>
</Col>
</Row>
</div>}
{this.state.loading ? (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<PropagateLoader
css={override}
size={20}
color={'#0086d3'}
loading={this.state.loading}
/>
</div>
) : (
<div className="page-list-container">
<ShowAuctions
auctions={this.getToShow().slice(0, this.state.end)}
updateParams={this.updateParams}
/>
</div>
)}
</Fragment>
);
}
Example #4
| Source File: historyBox.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Col key={this.props.box.id} md="4">
<ArtworkDetails
box={this.props.box}
isOpen={this.state.infoModal}
close={() =>
this.setState({
infoModal: !this.state.infoModal,
})
}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText='winner'
/>
<BidHistory close={this.openDetails} box={this.props.box} isOpen={this.state.detailsModal}/>
<div className="card mb-3 widget-chart">
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction='left'>
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisV}/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-md-left">
<Nav vertical>
<NavItem className="nav-item-header">
General
</NavItem>
<NavItem>
<NavLink
href={'#/auction/specific/' + this.props.box.boxId}
>Go to Auction's specific Link</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={20}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.props.box.loader}
/>
</ResponsiveContainer>
<div className="d-inline-flex">
{this.props.box.curBid >= this.props.box.minBid && <span className="widget-numbers">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)} {this.props.box.currency}
</span>}
{this.props.box.curBid < this.props.box.minBid && <span className="widget-numbers">
-
</span>}
{this.props.box.isArtwork && <span
onClick={() => this.setState({artDetail: true})}
data-tip="Artwork NFT"
className="icon-wrapper rounded-circle opacity-7 m-2 font-icon-wrapper">
<i className="lnr-picture icon-gradient bg-plum-plate fsize-4"/>
<ArtworkDetails
box={this.props.box}
isOpen={this.state.artDetail}
close={() => this.setState({artDetail: !this.state.artDetail})}
/>
</span>}
</div>
<ArtworkMedia preload={false} avoidFav={true} box={this.props.box}/>
<div className="widget-chart-wrapper chart-wrapper-relative justify justify-content-lg-start">
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span
data-tip={this.props.box.assets[0].tokenId}
>
{friendlyToken(this.props.box.assets[0], true, 8)}
</span>
<i
onClick={() =>
this.showIssuingTx(this.props.box)
}
data-tip="see issuing transaction"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Winner{' '}
{friendlyAddress(this.props.box.bidder, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see winner's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<ReactTooltip effect="solid" place="bottom"/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
flex: 1,
cursor: 'pointer',
justifyContent: 'center',
alignItems: 'center',
height: '100px',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
{this.props.box.description}
<Link
to={'/auction/active?type=other&artist=' + this.props.box.artist}
>
<b
>
{' '}- By {friendlyAddress(this.props.box.artist, 4)}
</b></Link>
</p>
</div>
</div>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative">
<Button
onClick={() => this.openMyBids()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-layers"> </i>
<span>My Bids</span>
</Button>
<Button
onClick={() => this.showTx(this.props.box.finalTx? this.props.box.finalTx : this.props.box.spentTransactionId)}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-exit-up"> </i>
<span>Final Transaction</span>
</Button>
<Button
onClick={() => {
this.setState({detailsModal: true});
}}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-chart-bars"> </i>
<span>Details</span>
</Button>
</div>
<CardFooter>
<ResponsiveContainer height={60}>
<Col className="widget-description">
Up by
<span className="text-success pl-1 pr-1">
<FontAwesomeIcon icon={faAngleUp}/>
<span className="pl-1">
{this.props.box.increase}%
</span>
</span>
in comparision to the initial bid
</Col>
</ResponsiveContainer>
</CardFooter>
</div>
</Col>
);
}
Example #5
| Source File: index.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let {
headerBackgroundColor,
enableMobileMenuSmall,
enableHeaderShadow
} = this.props;
return (
<Fragment>
<NewAuctionAssembler
isOpen={this.state.auctionModal}
close={() => this.setState({auctionModal: !this.state.auctionModal})}
assemblerModal={this.toggleAssemblerModal}
/>
<SendModal
isOpen={this.state.assemblerModal}
close={this.toggleAssemblerModal}
bidAmount={this.state.bidAmount}
isAuction={this.state.isAuction}
bidAddress={this.state.bidAddress}
currency={this.state.currency}
/>
<Refund
isOpen={this.state.refund}
close={() => this.setState({refund: false})}
/>
<NewArtwork
sendModal={this.toggleAssemblerModal}
isOpen={this.state.newArtworkModal}
close={() => this.setState({newArtworkModal: !this.state.newArtworkModal})}/>
<div id='myHeader' style={{zIndex: '10'}}>
<ReactCSSTransitionGroup
component="div"
className={cx("app-header", false, {'header-shadow': true})}
transitionName="HeaderAnimation"
transitionAppear={true}
transitionAppearTimeout={150}
transitionEnter={false}
transitionLeave={false}>
<Navbar color="white" light expand="md">
<NavbarBrand href="/">
<img
style={{height: '40px'}}
src={nodeWallet}
/>
</NavbarBrand>
<NavbarToggler onClick={() => this.setState({isOpen: !this.state.isOpen})}/>
<Collapse isOpen={this.state.isOpen} navbar>
<Col md='9'>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#/auction/active?type=all"
active={window.location.href.includes("#/auction/active")}>Active
Auctions</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/auction/history"
active={window.location.href.includes("#/auction/history")}
>Past Auctions</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/owned"
active={window.location.href.includes("#/owned")}
>Owned Artworks</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => this.setState({refund: true})}>
Refund
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/faq"
active={window.location.href.includes("#/faq")}
>
FAQ
</NavLink>
</NavItem>
{/*<div className="search-container">*/}
<div className="search-box">
<form className="d-flex justify-content-between align-items-center"
onSubmit={(e) => {
e.preventDefault();
this.updateParams('searchValue', this.state.searchValue)
}}>
{/*< className="">*/}
<input
placeholder="Search in name, description and addresses"
value={this.state.searchValue}
onChange={(e) => {
this.setState({searchValue: e.target.value})
}}
/>
<button className="search-icon-container" type="submit">
{/*<i className="lnr lnr-magnifier search-icon"/>*/}
<span className="lnr lnr-magnifier font-size-lg"/>
</button>
</form>
</div>
{/*</div>*/}
</Nav>
</Col>
<Col md='3'>
<div className='float-right'>
<Row>
<UncontrolledButtonDropdown>
<DropdownToggle outline className="border-0 mr-2 font-size-lg"
color="none">
<span className="notificationIcon pe-7s-plus font-weight-bold"/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem
onClick={() => {
this.openAuction()
}}>New Auction</DropdownItem>
<DropdownItem
onClick={() => this.openArtwork()}>Create Artwork</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<WalletModal/>
</Row>
</div>
</Col>
</Collapse>
</Navbar>
</ReactCSSTransitionGroup>
</div>
</Fragment>
);
}
Example #6
| Source File: Static.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<div className={s.root}>
<h2 className="page-title">
Tables - <span className="fw-semi-bold">Static</span>
</h2>
<Row>
<Col lg={6} md={12} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
bodyClass={s.mainTableWidget}
>
<div className={s.overFlow}>
<Table lg={12} md={12} sm={12} striped>
<thead>
<tr className="fs-sm">
<th className="hidden-sm-down">#</th>
<th>Picture</th>
<th>Description</th>
<th className="hidden-sm-down">Info</th>
<th className="hidden-sm-down">Date</th>
<th className="hidden-sm-down">Size</th>
<th className="hidden-sm-down">Status</th>
</tr>
</thead>
<tbody>
{this.state.tableStyles.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>
<img
className="img-rounded"
src={row.picture}
alt=""
height="50"
/>
</td>
<td>
{row.description}
{row.label && (
<div>
<Badge color={row.label.colorClass}>
{row.label.text}
</Badge>
</div>
)}
</td>
<td>
<p className="mb-0">
<small>
Type:
<span className="text-muted fw-semi-bold">
{row.info.type}
</span>
</small>
</p>
<p>
<small>
Dimensions:
<span className="text-muted fw-semi-bold">
{row.info.dimensions}
</span>
</small>
</p>
</td>
<td className="text-muted">{this.parseDate(row.date)}</td>
<td className="text-muted">{row.size}</td>
<td className="width-150">
<Progress
color={row.progress.colorClass}
value={row.progress.percent}
className="progress-sm mb-xs"
/>
</td>
</tr>
))}
</tbody>
</Table>
</div>
<div className="clearfix">
<div className="float-right">
<Button color="default" className="mr-2" size="sm">
Send to...
</Button>
<UncontrolledButtonDropdown>
<DropdownToggle
color="inverse"
className="mr-xs"
size="sm"
caret
>
Clear
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Clear</DropdownItem>
<DropdownItem>Move ...</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<p>Basic table with styled content</p>
</div>
</Widget>
</Col>
<Col lg={6} md={12} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
>
<h3>
Stripped <span className="fw-semi-bold">Table</span>
</h3>
<p>
Each row is highlighted. You will never lost there. Just{" "}
<code>.table-striped</code> it.
</p>
<div className={`widget-table-overflow ${s.overFlow}`}>
<Table className="table-striped">
<thead>
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox1"
type="checkbox"
checked={this.state.checkboxes1[0]}
onChange={(event) =>
this.checkAll(event, "checkboxes1")
}
/>
<Label for="checkbox1" />
</div>
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox2"
type="checkbox"
checked={this.state.checkboxes1[1]}
onChange={(event) =>
this.changeCheck(event, "checkboxes1", 1)
}
/>
<Label for="checkbox2" />
</div>
</td>
<td>Mark</td>
<td>Otto</td>
<td>
<Badge color="danger">Online</Badge>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox3"
type="checkbox"
checked={this.state.checkboxes1[2]}
onChange={(event) =>
this.changeCheck(event, "checkboxes1", 2)
}
/>
<Label for="checkbox3" />
</div>
</td>
<td>
Jacob{" "}
<Badge color="warning" className="ml-2">
ALERT!
</Badge>
</td>
<td>Thornton</td>
<td>
<span className="text-secondary badge badge-gray">
Away
</span>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox4"
type="checkbox"
checked={this.state.checkboxes1[3]}
onChange={(event) =>
this.changeCheck(event, "checkboxes1", 3)
}
/>
<Label for="checkbox4" />
</div>
</td>
<td>Larry</td>
<td>the Bird</td>
<td>
<Badge color="danger">Construct</Badge>
</td>
</tr>
</tbody>
</Table>
</div>
<br />
<br />
<h3>
Hover <span className="fw-semi-bold">Table</span>
</h3>
<p>
{"Trace only what's really important. "}
<code>.table-hover</code> is made for it.
</p>
<div className={s.overFlow}>
<Table className="table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
{/* eslint-disable */}
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="gray" className="text-secondary" pill>
Pending
</Badge>
</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="gray" className="text-secondary" pill>
Unconfirmed
</Badge>
</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="primary" className="text-secondary" pill>
New
</Badge>
</td>
</tr>
<tr>
<td>4</td>
<td>Peter</td>
<td>Horadnia</td>
<td>
<a href="#">[email protected]</a>
</td>
<td>
<Badge color="success" className="text-secondary" pill>
Active
</Badge>
</td>
</tr>
</tbody>
{/* eslint-enable */}
</Table>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} md={6} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
>
<h3>
Bordered <span className="fw-semi-bold">Table</span>
</h3>
<p>
Each row is highlighted. You will never lost there. That's
how all of us learned in school the table should look like. Just
add
<code>.table-bordered</code> to it.
</p>
<div className={`widget-table-overflow ${s.overFlow}`}>
<Table className="table-bordered table-lg mt-lg mb-0">
<thead className="text-uppercase">
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox10"
type="checkbox"
checked={this.state.checkboxes2[0]}
onChange={(event) =>
this.checkAll(event, "checkboxes2")
}
/>
<Label for="checkbox10" />
</div>
</th>
<th>Product</th>
<th className="text-right">Price</th>
<th className="text-center">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox11"
type="checkbox"
checked={this.state.checkboxes2[1]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 1)
}
/>
<Label for="checkbox11" />
</div>
</td>
<td>On the Road</td>
<td className="text-right">$25 224.2</td>
<td className="text-center">
<Sparklines
data={[13, 14, 16, 15, 4, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#1870DC" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox12"
type="checkbox"
checked={this.state.checkboxes2[2]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 2)
}
/>
<Label for="checkbox12" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-right">$87 346.1</td>
<td className="text-center">
<Sparklines
data={[14, 12, 16, 11, 17, 19, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#58D777" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox13"
type="checkbox"
checked={this.state.checkboxes2[3]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 3)
}
/>
<Label for="checkbox13" />
</div>
</td>
<td>Let's Dance</td>
<td className="text-right">$57 944.6</td>
<td className="text-center">
<Sparklines
data={[11, 17, 19, 16, 14, 12, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#f0af03" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox14"
type="checkbox"
checked={this.state.checkboxes2[4]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 4)
}
/>
<Label for="checkbox14" />
</div>
</td>
<td>Air Pro</td>
<td className="text-right">$118 533.1</td>
<td className="text-center">
<Sparklines
data={[13, 14, 20, 16, 15, 4, 14]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#F45722" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox15"
type="checkbox"
checked={this.state.checkboxes2[5]}
onChange={(event) =>
this.changeCheck(event, "checkboxes2", 5)
}
/>
<Label for="checkbox15" />
</div>
</td>
<td>Version Control</td>
<td className="text-right">$72 854.5</td>
<td className="text-center">
<Sparklines
data={[16, 15, 4, 14, 13, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#4ebfbb" }} />
</Sparklines>
</td>
</tr>
</tbody>
</Table>
</div>
</Widget>
</Col>
<Col lg={6} md={6} sm={12}>
<Widget
title={
<h5>
Table <span className="fw-semi-bold">Styles</span>
</h5>
}
settings
close
>
<h3>
Overflow <span className="fw-semi-bold">Table</span>
</h3>
<p>
Add any non-bordered .table within a widget for a seamless
design. Awesome look for no cost. Just wrap the table with
simple css class <code>.widget-table-overflow</code> inside of
widget
</p>
<div className={`widget-table-overflow ${s.overFlow}`}>
<Table className="table-striped table-lg mt-lg mb-0">
<thead>
<tr>
<th>
<div className="abc-checkbox">
<Input
id="checkbox20"
type="checkbox"
checked={this.state.checkboxes3[0]}
onChange={(event) =>
this.checkAll(event, "checkboxes3")
}
/>
<Label for="checkbox20" />
</div>
</th>
<th>Product</th>
<th className="text-right">Price</th>
<th className="text-center">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox21"
type="checkbox"
checked={this.state.checkboxes3[1]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 1)
}
/>
<Label for="checkbox21" />
</div>
</td>
<td>On the Road</td>
<td className="text-right">$25 224.2</td>
<td className="text-center">
<Sparklines
data={[13, 14, 16, 15, 4, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#1870DC" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox22"
type="checkbox"
checked={this.state.checkboxes3[2]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 2)
}
/>
<Label for="checkbox22" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-right">$87 346.1</td>
<td className="text-center">
<Sparklines
data={[14, 12, 16, 11, 17, 19, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#F45722" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox23"
type="checkbox"
checked={this.state.checkboxes3[3]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 3)
}
/>
<Label for="checkbox23" />
</div>
</td>
<td>Let's Dance</td>
<td className="text-right">$57 944.6</td>
<td className="text-center">
<Sparklines
data={[11, 17, 19, 16, 14, 12, 16]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#f0af03" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox24"
type="checkbox"
checked={this.state.checkboxes3[4]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 4)
}
/>
<Label for="checkbox24" />
</div>
</td>
<td>Air Pro</td>
<td className="text-right">$118 533.1</td>
<td className="text-center">
<Sparklines
data={[13, 14, 20, 16, 15, 4, 14]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#58D777" }} />
</Sparklines>
</td>
</tr>
<tr>
<td>
<div className="abc-checkbox">
<Input
id="checkbox25"
type="checkbox"
checked={this.state.checkboxes3[5]}
onChange={(event) =>
this.changeCheck(event, "checkboxes3", 5)
}
/>
<Label for="checkbox25" />
</div>
</td>
<td>Version Control</td>
<td className="text-right">$72 854.5</td>
<td className="text-center">
<Sparklines
data={[16, 15, 4, 14, 13, 14, 20]}
style={{ width: "35px", height: "20px" }}
>
<SparklinesBars style={{ fill: "#4ebfbb" }} />
</Sparklines>
</td>
</tr>
</tbody>
</Table>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
Example #7
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Default Dropdowns</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle caret>Clear</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="primary" caret>
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="secondary" caret>
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="success" caret>
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="info" caret>
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="warning" caret>
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="danger" caret>
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="light" caret>
Light
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="dark" caret>
Dark
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<br />
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-primary" caret>
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-secondary" caret>
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-success" caret>
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-info" caret>
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-warning" caret>
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-danger" caret>
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-light" caret>
Light
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-dark" caret>
Dark
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Alignment</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Right Aligned Dropdown
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Dividers</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With dividers
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Headers</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With headers
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem header>Header</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Icons</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With icons
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<i className="fe fe-activity mr-2" />
Reply
</DropdownItem>
<DropdownItem>
<i className="fe fe-clock mr-2" />
Share
</DropdownItem>
<DropdownItem>
<i className="fe fe-credit-card mr-2" />
Delete
</DropdownItem>
<DropdownItem>
<i className="fe fe-plus-circle mr-2" />
Add
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<i className="fe fe-settings mr-2" />
Settings
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Active Item</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With active item
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem active>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Disabled Item</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Disabled items
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem disabled>Another Action</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Enabled</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Sizing</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" size="lg" caret>
Large
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" size="sm" caret>
Small
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Split Buttons</strong>
</h5>
<UncontrolledButtonDropdown>
<Button color="outline-default">Split buttons</Button>
<DropdownToggle caret color="outline-default" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Dropup</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2" direction="up">
<DropdownToggle color="outline-default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
</div>
)
}
Example #8
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Default Dropdowns</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle caret>Clear</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="primary" caret>
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="secondary" caret>
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="success" caret>
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="info" caret>
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="warning" caret>
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="danger" caret>
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="light" caret>
Light
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="dark" caret>
Dark
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<br />
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-primary" caret>
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-secondary" caret>
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-success" caret>
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-info" caret>
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-warning" caret>
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-danger" caret>
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-light" caret>
Light
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-dark" caret>
Dark
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Alignment</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Right Aligned Dropdown
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Dividers</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With dividers
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Headers</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With headers
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem header>Header</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Icons</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With icons
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<i className="fe fe-activity mr-2" />
Reply
</DropdownItem>
<DropdownItem>
<i className="fe fe-clock mr-2" />
Share
</DropdownItem>
<DropdownItem>
<i className="fe fe-credit-card mr-2" />
Delete
</DropdownItem>
<DropdownItem>
<i className="fe fe-plus-circle mr-2" />
Add
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<i className="fe fe-settings mr-2" />
Settings
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Active Item</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With active item
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem active>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Disabled Item</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Disabled items
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem disabled>Another Action</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Enabled</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Sizing</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" size="lg" caret>
Large
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" size="sm" caret>
Small
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Split Buttons</strong>
</h5>
<UncontrolledButtonDropdown>
<Button color="outline-default">Split buttons</Button>
<DropdownToggle caret color="outline-default" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Dropup</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2" direction="up">
<DropdownToggle color="outline-default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
</div>
)
}
