@fortawesome/free-solid-svg-icons#faAngleUp JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faAngleUp.
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: index.js From gatsby-blog-mdx with MIT License | 6 votes |
|
render() {
return this.state.show ? (
<StyledButton
className="btn-scroll-top"
onClick={() => {
this.scrollToTop()
}}
>
<FontAwesomeIcon className="icon-chevron" icon={faAngleUp} size="3x" />
</StyledButton>
) : null
}
Example #2
| Source File: Tables.js From volt-react-dashboard with MIT License | 6 votes |
|
ValueChange = ({ value, suffix }) => {
const valueIcon = value < 0 ? faAngleDown : faAngleUp;
const valueTxtColor = value < 0 ? "text-danger" : "text-success";
return (
value ? <span className={valueTxtColor}>
<FontAwesomeIcon icon={valueIcon} />
<span className="fw-bold ms-1">
{Math.abs(value)}{suffix}
</span>
</span> : "--"
);
}
Example #3
| Source File: Widgets.js From volt-react-dashboard with MIT License | 6 votes |
|
CounterWidget = (props) => {
const { icon, iconColor, category, title, period, percentage } = props;
const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
const percentageColor = percentage < 0 ? "text-danger" : "text-success";
return (
<Card border="light" className="shadow-sm">
<Card.Body>
<Row className="d-block d-xl-flex align-items-center">
<Col xl={5} className="text-xl-center d-flex align-items-center justify-content-xl-center mb-3 mb-xl-0">
<div className={`icon icon-shape icon-md icon-${iconColor} rounded me-4 me-sm-0`}>
<FontAwesomeIcon icon={icon} />
</div>
<div className="d-sm-none">
<h5>{category}</h5>
<h3 className="mb-1">{title}</h3>
</div>
</Col>
<Col xs={12} xl={7} className="px-xl-0">
<div className="d-none d-sm-block">
<h5>{category}</h5>
<h3 className="mb-1">{title}</h3>
</div>
<small>{period}, <FontAwesomeIcon icon={faGlobeEurope} size="xs" /> WorldWide</small>
<div className="small mt-2">
<FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
<span className={`${percentageColor} fw-bold`}>
{percentage}%
</span> Since last month
</div>
</Col>
</Row>
</Card.Body>
</Card>
);
}
Example #4
| Source File: Widgets.js From volt-react-dashboard with MIT License | 6 votes |
|
BarChartWidget = (props) => {
const { title, value, percentage, data = [] } = props;
const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const series = data.map(d => d.value);
const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
const percentageColor = percentage < 0 ? "text-danger" : "text-success";
return (
<Card border="light" className="shadow-sm">
<Card.Body className="d-flex flex-row align-items-center flex-0 border-bottom">
<div className="d-block">
<h6 className="fw-normal text-gray mb-2">{title}</h6>
<h3>{value}</h3>
<small className="mt-2">
<FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
<span className={`${percentageColor} fw-bold`}>
{percentage}%
</span>
</small>
</div>
<div className="d-block ms-auto">
{data.map(d => (
<div key={`bar-element-${d.id}`} className="d-flex align-items-center text-end mb-2">
<span className={`shape-xs rounded-circle bg-${d.color} me-2`} />
<small className="fw-normal">{d.label}</small>
</div>
))}
</div>
</Card.Body>
<Card.Body className="p-2">
<BarChart labels={labels} series={series} />
</Card.Body>
</Card>
);
}
Example #5
| Source File: Widgets.js From volt-react-dashboard with MIT License | 6 votes |
|
SalesValueWidget = (props) => {
const { title, value, percentage } = props;
const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
const percentageColor = percentage < 0 ? "text-danger" : "text-success";
return (
<Card className="bg-secondary-alt shadow-sm">
<Card.Header className="d-flex flex-row align-items-center flex-0">
<div className="d-block">
<h5 className="fw-normal mb-2">
{title}
</h5>
<h3>${value}</h3>
<small className="fw-bold mt-2">
<span className="me-2">Yesterday</span>
<FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
<span className={percentageColor}>
{percentage}%
</span>
</small>
</div>
<div className="d-flex ms-auto">
<Button variant="secondary" size="sm" className="me-2">Month</Button>
<Button variant="primary" size="sm" className="me-3">Week</Button>
</div>
</Card.Header>
<Card.Body className="p-2">
<SalesValueChart />
</Card.Body>
</Card>
);
}
Example #6
| Source File: Widgets.js From volt-react-dashboard with MIT License | 6 votes |
|
SalesValueWidgetPhone = (props) => {
const { title, value, percentage } = props;
const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
const percentageColor = percentage < 0 ? "text-danger" : "text-success";
return (
<Card className="bg-secondary-alt shadow-sm">
<Card.Header className="d-md-flex flex-row align-items-center flex-0">
<div className="d-block mb-3 mb-md-0">
<h5 className="fw-normal mb-2">
{title}
</h5>
<h3>${value}</h3>
<small className="fw-bold mt-2">
<span className="me-2">Yesterday</span>
<FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
<span className={percentageColor}>
{percentage}%
</span>
</small>
</div>
<div className="d-flex ms-auto">
<Button variant="secondary" size="sm" className="me-2">Month</Button>
<Button variant="primary" size="sm" className="me-3">Week</Button>
</div>
</Card.Header>
<Card.Body className="p-2">
<SalesValueChartphone />
</Card.Body>
</Card>
);
}
Example #7
| Source File: Archive.js From Todo-List with MIT License | 5 votes |
|
function CustomToggle2({ children, eventKey }) {
return (
<FontAwesomeIcon icon={faAngleUp} onClick={useAccordionToggle(eventKey)}></FontAwesomeIcon>
);
}
Example #8
| Source File: scroll-to-top-button.component.jsx From courseyard with MIT License | 5 votes |
|
function ScrollToTopButton() {
const [display, setDisplay] = useState("hidden");
const [active, setActive] = useState("");
const toTop = () => {
/*
document.body.scrollTop=0;
document.documentElement.scrollTop=0;
*/
window.scroll({
top: 0,
behavior: "smooth",
});
};
const getDisplay = () => {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
setDisplay("block");
setActive("active");
} else {
setDisplay("hidden");
setActive("notactive");
}
};
useEffect(() => {
window.onscroll = function () {
getDisplay();
};
return () => {
window.onscroll = null;
};
}, []);
return (
<button
className={`totop fixed ${display} ${active} shadow-md focus:outline-none bottom-0 z-40 text-2xl right-0 bg-primary w-12 h-12 my-5 mx-5 rounded-full font-display font-bold hover:text-white`}
onClick={toTop}
>
<FontAwesomeIcon icon={faAngleUp} />
</button>
);
}
Example #9
| Source File: Widgets.js From volt-react-dashboard with MIT License | 5 votes |
|
RankingWidget = () => {
return (
<Card border="light" className="shadow-sm">
<Card.Body>
<div className="d-flex align-items-center justify-content-between border-bottom border-light pb-3">
<div>
<h6><FontAwesomeIcon icon={faGlobeEurope} className="icon icon-xs me-3" /> Global Rank</h6>
</div>
<div>
<Card.Link href="#" className="text-primary fw-bold">
#755 <FontAwesomeIcon icon={faChartLine} className="ms-2" />
</Card.Link>
</div>
</div>
<div className="d-flex align-items-center justify-content-between border-bottom border-light py-3">
<div>
<h6 className="mb-0"><FontAwesomeIcon icon={faFlagUsa} className="icon icon-xs me-3" />Country Rank</h6>
<div className="small card-stats">
United States <FontAwesomeIcon icon={faAngleUp} className="icon icon-xs text-success ms-2" />
</div>
</div>
<div>
<Card.Link href="#top" className="text-primary fw-bold">
#32 <FontAwesomeIcon icon={faChartLine} className="ms-2" />
</Card.Link>
</div>
</div>
<div className="d-flex align-items-center justify-content-between pt-3">
<div>
<h6 className="mb-0"><FontAwesomeIcon icon={faFolderOpen} className="icon icon-xs me-3" />Category Rank</h6>
<Card.Link href="#top" className="small card-stats">
Travel > Accomodation
</Card.Link>
</div>
<div>
<Card.Link href="#top" className="text-primary fw-bold">
#16 <FontAwesomeIcon icon={faChartLine} className="ms-2" />
</Card.Link>
</div>
</div>
</Card.Body>
</Card>
);
}
Example #10
| 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 #11
| Source File: footerSection.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span style={{"display": "contents"}}>
<FakeModal bid={this.state.bid} modal={this.state.modal} box={this.state.box}
original={this.state.original} isOpen={this.state.fakeOpen}
close={() => this.setState({fakeOpen: !this.state.fakeOpen})}/>
<CardFooter>
<Col md={6} className="widget-description">
<Row>
{this.props.box.curBid >= this.props.box.minBid && <span>
<b className="fsize-1">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)}{' '}{this.props.box.currency}
</b>{' '}
<text
style={{fontSize: '10px'}}
className="text-success pl-1 pr-1"
>
{this.props.box.increase}%
<FontAwesomeIcon icon={faAngleUp}/>
</text>
</span>}
{this.props.box.curBid < this.props.box.minBid && <span>
<i
style={{fontSize: '12px'}}
className="pl-1 pr-1"
>
No bids yet
</i>{' '}
</span>}
</Row>
</Col>
<Col md={6} className="justify-content-end ml-3">
<div className="widget-content">
<div className="widget-content-outer">
<div className="widget-content-wrapper">
{this.props.box.remTime}
</div>
<div className="widget-progress-wrapper">
<Progress
className="progress-bar-xs progress-bar-animated-alt"
value={this.props.box.done}
/>
</div>
</div>
</div>
</Col>
</CardFooter>
{!this.props.box.isFinished && <ButtonGroup>
<div className="d-block text-center">
<button className="btn-icon btn-icon-only btn btn-outline-primary"
onClick={(e) => {
e.preventDefault();
this.props.openBid();
}}>
<i className="pe-7s-edit btn-icon-wrapper"> </i>
</button>
</div>
<button type="button" className="btn btn-outline-primary btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.nextBid, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Bid
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.nextBid, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>
{this.props.box.instantAmount !== -1 &&
<button type="button" className="btn btn-outline-dark btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.instantAmount, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Buy
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.instantAmount, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>}
</ButtonGroup>}
{this.props.box.isFinished &&
<p className="text-danger mr-2 ml-2">
{this.props.box.remTime === 0 && <text>
This auction is already finished!
</text>}
{this.props.box.remTime !== 0 && <text>
This auction has been bought with the "Instant Buy" option.
</text>}
</p>}
</span>
);
}
