@fortawesome/free-solid-svg-icons#faCaretDown JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCaretDown.
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: _app.jsx From teach-yourself-code with MIT License | 6 votes |
|
library.add( faHome, faInfoCircle, faUser, faYoutube, faBookmark, faSignOutAlt, faCaretDown, faArrowAltCircleLeft, faArrowAltCircleRight, faAtom, faMap );
Example #2
| Source File: DropMenu.js From saltcorn with MIT License | 5 votes |
|
DropMenu = ({
children,
action_style,
action_size,
action_icon,
action_bgcol,
action_bordercol,
action_textcol,
block,
label,
}) => {
const {
selected,
connectors: { connect, drag },
} = useNode((node) => ({ selected: node.events.selected }));
const [showDropdown, setDropdown] = useState(false);
//const [dropWidth, setDropWidth] = useState(200);
return (
<div
className={`${selected ? "selected-node" : ""} ${block ? "d-block" : ""}`}
ref={(dom) => connect(drag(dom))}
>
<button
className={`btn ${action_style || "btn-primary"} ${action_size || ""} `}
style={
action_style === "btn-custom-color"
? {
backgroundColor: action_bgcol || "#000000",
borderColor: action_bordercol || "#000000",
color: action_textcol || "#000000",
}
: {}
}
>
<DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
{label}
<FontAwesomeIcon
icon={faCaretDown}
className="ms-1"
onClick={() => setDropdown(!showDropdown)}
/>
</button>
<div
className={`dropdown-menu dropmenu-dropdown ${
showDropdown ? "show" : ""
}`}
>
<div className="canvas d-flex flex-column">{children}</div>
</div>
</div>
);
}
Example #3
| Source File: SearchBar.js From saltcorn with MIT License | 5 votes |
|
SearchBar = ({ has_dropdown, children, show_badges }) => {
const {
selected,
connectors: { connect, drag },
} = useNode((node) => ({ selected: node.events.selected }));
const [showDropdown, setDropdown] = useState(false);
const [dropWidth, setDropWidth] = useState(200);
return (
<div
className={`input-group ${selected ? "selected-node" : ""}`}
ref={(dom) => {
if (dom && dom.getBoundingClientRect) {
//console.log(dom.getBoundingClientRect());
const elwidth = dom.getBoundingClientRect().width;
if (elwidth !== dropWidth) setDropWidth(elwidth);
}
connect(drag(dom));
}}
>
<button className="btn btn-outline-secondary" disabled>
<i className="fas fa-search"></i>
</button>
<input
type="text"
className="form-control bg-light"
placeholder="Search..."
disabled
/>
{show_badges && (
<div className="input-group-text">
<span className="badge bg-primary">X:Y</span>
</div>
)}
{has_dropdown && (
<Fragment>
<button
className="btn btn-outline-secondary"
onClick={() => setDropdown(!showDropdown)}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
<div
className={`dropdown-menu searchbar-dropdown ${
showDropdown ? "show" : ""
}`}
style={{ width: dropWidth, left: 0 }}
>
<div className="canvas">{children}</div>
</div>
</Fragment>
)}
</div>
);
}
Example #4
| Source File: RequestInput.js From Postman-Clone with MIT License | 5 votes |
|
RequestInput = (props) => {
const { tab, handleChange, handleSubmit } = props;
if (tab !== undefined) {
return (
<div className="content__requestInputWrapper">
<div className="content__requestDetailsRow">
<div className="content__requestDetailsColumn">
<FontAwesomeIcon icon={faCaretRight} />
<span className="content__requestDetailsName">{tab.name}</span>
</div>
<div className="content__requestDetailsColumn">
<FontAwesomeIcon icon={faComment} />
<span className="content__requestDetailsName">
Comments
<span className="content__requestBadge">0</span>
</span>
<span className="content__requestDetailsName">
Examples
<span className="content__requestBadge">0</span>
</span>
<FontAwesomeIcon icon={faCaretDown} />
</div>
</div>
{/* Input */}
<div className="content__requestInputRow">
<div className="content__requestInputColumn">
<select>
<option>GET</option>
<option>POST</option>
</select>
<input type="text" placeholder="" onChange={handleChange} />
<button
className="content__requestSendButton"
onClick={handleSubmit}
>
Send
<FontAwesomeIcon
icon={faCaretDown}
className="content__requestSendButtonIcon"
/>
</button>
<button className="content__requestSaveButton ">
Save
<FontAwesomeIcon
icon={faCaretDown}
className="content__requestSendButtonIcon"
/>
</button>
</div>
</div>
</div>
);
} else {
return null;
}
}
Example #5
| Source File: Response.js From Postman-Clone with MIT License | 5 votes |
|
Response = (props) => {
const { tab } = props;
return (
<div className="content__responseContainer">
<div className="content__responeMenu">
<div className="content__responseMenuRow">
<div className="content__responseMenuColumn">
<span className="content__responseMenuOption active">Body</span>
<span className="content__responseMenuOption">Cookies</span>
<span className="content__responseMenuOption">Headers</span>
<span className="content__responseMenuOption">Test Results</span>
</div>
{tab.response.response !== undefined ||
tab.response.status !== undefined ? (
<div className="content__responseMenuColumn">
<span className="content__responseMenuOption">
<FontAwesomeIcon icon={faGlobe} className="mr-2" />
Status :{" "}
<span className="content__greenText">
{tab.response.status === "success"
? "200 OK"
: tab.response.response.status}
</span>
</span>
<span className="content__responseMenuOption">
Time : <span className="content__greenText">2.3 ms</span>
</span>
<span className="content__responseMenuOption">
Size : <span className="content__greenText">400 KB</span>
</span>
<span
className="content__responseMenuOption"
id="saveResponseButton"
>
Save Response <FontAwesomeIcon icon={faCaretDown} />
</span>
</div>
) : null}
</div>
</div>
<br />
<div className="content__JSONViewer">
<ReactJson
src={
tab.response.data !== undefined || tab.response !== undefined
? tab.response.data
: tab.response.response.data
}
/>
</div>
</div>
);
}
Example #6
| Source File: NavBar.js From clayma-store with MIT License | 4 votes |
|
export default function NavBar() {
const { myShoppingCart } = useContext(GlobalCartContext);
const [toggleNav, setToggelNav] = useState(false);
function handleToggle(e) {
e.preventDefault();
setToggelNav(!toggleNav);
}
return (
<div>
<header>
<div className="container-nav">
<nav className={` ${toggleNav ? "active" : ""}`}>
<div className="menu-icon">
<FontAwesomeIcon
icon={faBars}
className="menu-icon-bar"
onClick={(e) => handleToggle(e)}
/>
<FontAwesomeIcon
icon={faTimes}
className="menu-icon-close"
onClick={(e) => handleToggle(e)}
/>
</div>
<ul className="navigation-list">
<li>
<Link to="/">
Home
</Link>
{/* <a href="/">Home</a> */}
</li>
<li>
<Link to="#">
Products
<i className="icon ">
<FontAwesomeIcon icon={faCaretDown} />
</i>
</Link>
<ul className="products-cat">
<li>
<Link to="/collections">All</Link>
</li>
<li>
<Link to="/collections/men">Men</Link>
</li>
<li>
<Link to="/collections/women">Women</Link>
</li>
<li>
<Link to="/collections/kids">Kids</Link>
</li>
</ul>
</li>
<li>
<Link to="#">
Collections
<i className="icon ">
<FontAwesomeIcon icon={faCaretDown} />
</i>
</Link>
<ul className="products-cat">
<li>
<Link to="/trend/New">New Arrival</Link>
</li>
<li>
<Link to="/trend/Trending">Trending</Link>
</li>
</ul>
</li>
<li>
<Link to="/search">Search</Link>
</li>
<li className="nav-shopping-cart">
<Link
to="/cart"
className="cart position-relative d-inline-flex"
>
<FontAwesomeIcon
icon={faShoppingCart}
className="store-cart-icon"
/>
<span className="cart-basket d-flex align-items-center justify-content-center ">
{myShoppingCart.length}{" "}
</span>
</Link>
</li>
</ul>
</nav>
</div>
</header>
</div>
);
}
