reactstrap#DropdownItem JavaScript Examples
The following examples show how to use
reactstrap#DropdownItem.
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: LteNotificationNavItem.jsx From react-lte with MIT License | 6 votes |
|
LteNotificationNavItem = ({ icon, message, date, href }) => {
return (
<>
<DropdownItem tag={Link} to={href}>
<FontAwesomeIcon icon={icon} />
<span className='ml-2'>{message}</span>
<LteText className='float-right' size='sm' color='muted'>
{date}
</LteText>
</DropdownItem>
<DropdownItem divider />
</>
);
}
Example #2
| Source File: NavMenu.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
render() {
return (
<Navbar className="ui-header" expand="md">
<NavbarBrand className="ui-header-brand">Hexacta Labs</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<UncontrolledDropdown className="ui-header-options" nav inNavbar>
<DropdownToggle caret>
<FaUserInjured />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
tag={() => (
<Link className="dropdown-item" to="/logout">
Salir
</Link>
)}
/>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
);
}
Example #3
| Source File: Tables.js From covidsos with MIT License | 6 votes |
|
getDropDown(tableConfig, rowData) {
return (
<UncontrolledDropdown>
<DropdownToggle
className="btn-icon-only text-light"
href="#"
role="button"
color=""
onClick={e => e.preventDefault()}>
<i className="fas fa-ellipsis-h"/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{
tableConfig.actions.map(action => {
return (
<DropdownItem href="#" key={action.key + '_' + (rowData.r_id || rowData.v_id)}
onClick={e => {
this.takeAction(action, rowData, tableConfig);
e.preventDefault();
}}>
{action.name}
</DropdownItem>
);
})
}
</DropdownMenu>
</UncontrolledDropdown>
);
}
Example #4
| Source File: CardHeader.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
<CardBody>
<UncontrolledDropdown className="float-right">
<DropdownToggle tag="i" style={{cursor:"pointer"}} className="arrow-none">
<i className="mdi mdi-dots-vertical m-0 text-muted font-size-20"></i>
</DropdownToggle >
<DropdownMenu right>
<DropdownItem>Edit</DropdownItem>
<DropdownItem>Delete</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<h4 className="card-title">{this.props.title}</h4>
<p className="mb-0">{this.props.columnsubtitle}</p>
</CardBody>
</React.Fragment>
);
}
Example #5
| Source File: LanguageDropdown.js From Simplify-Testing-with-React-Testing-Library with MIT License | 6 votes |
|
LanguageDropdown = () => {
const [dropdownOpen, setDropdownOpen] = React.useState(false)
const [language, setLanguage] = React.useState('')
const languages = ['JavaScript', 'Ruby', 'Java', 'C#']
const toggle = () => setDropdownOpen(prevState => !prevState)
return (
<div className="p-2 d-inline-block">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Programming Language
</DropdownToggle>
<DropdownMenu style={{ width: '214px' }}>
{languages.map(lang => {
return (
<DropdownItem key={lang} onClick={() => setLanguage(lang)}>
{lang}
</DropdownItem>
)
})}
</DropdownMenu>
</Dropdown>
{language ? <h4>You selected: {language}</h4> : null}
</div>
)
}
Example #6
| Source File: ProfileMenu.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
let username = "Admin";
if (localStorage.getItem("logonUser")) {
// const obj = JSON.parse(localStorage.getItem("authUser"));
// const uNm = obj.email.split("@")[0];
// username = uNm.charAt(0).toUpperCase() + uNm.slice(1);
username = localStorage.getItem("logonUser");
}
return (
<React.Fragment>
<Dropdown isOpen={this.state.menu} toggle={this.toggle} className="d-inline-block user-dropdown">
<DropdownToggle tag="button" className="btn header-item waves-effect" id="page-header-user-dropdown">
<img className="rounded-circle header-profile-user mr-1" src={avatar2} alt="Header Avatar" />
<span className="d-none d-xl-inline-block ml-1 text-transform">{username}</span>
<i className="mdi mdi-chevron-down d-none ml-1 d-xl-inline-block"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#"><i className="ri-user-line align-middle mr-1"></i> {this.props.t('Profile')}</DropdownItem>
{/* <DropdownItem href="#"><i className="ri-wallet-2-line align-middle mr-1"></i> {this.props.t('My Wallet')}</DropdownItem>
<DropdownItem className="d-block" href="#"><span className="badge badge-success float-right mt-1">11</span><i className="ri-settings-2-line align-middle mr-1"></i> {this.props.t('Settings')}</DropdownItem>
<DropdownItem href="#"><i className="ri-lock-unlock-line align-middle mr-1"></i> {this.props.t('Lock screen')}</DropdownItem>
<DropdownItem divider /> */}
<DropdownItem className="text-danger" href="/logout"><i className="ri-shut-down-line align-middle mr-1 text-danger"></i> {this.props.t('Logout')}</DropdownItem>
</DropdownMenu>
</Dropdown>
</React.Fragment>
);
}
Example #7
| Source File: NotificationMenu.jsx From react-lte with MIT License | 6 votes |
|
NotificationMenu = ({ href }) => {
return (
<LteNavDropdown icon={faBell} badgeText='15' badgeColor='warning'>
<DropdownItem tag='span' header>
15 Notifications
</DropdownItem>
<DropdownItem divider />
<Content data={demoData} />
<DropdownItem tag={Link} to={href} className='dropdown-footer'>
See All Notifications
</DropdownItem>
</LteNavDropdown>
);
}
Example #8
| Source File: UserConfig.jsx From watchmo with MIT License | 6 votes |
|
UserConfig = () => {
// setting the state for the drop down button with typescript
const [dropdownCatOpen, setCatOpen] = React.useState;
// function that is in charge of changing the state
const toggleCat = () => {
setCatOpen(!dropdownCatOpen);
};
// request file from backend and loop through categories to create category selectors
// replace this arrayOfCategories with logic that parses the response object into specific cats
const arrayOfCategories = ['Cat 1', 'Cat 2', 'Cat 3'];
const categories = [];
for (let i = 0; i < arrayOfCategories.length; i += 1) {
categories.push(<DropdownItem key={i}> {arrayOfCategories[i]} </DropdownItem>);
}
return (
<div id="UserConfig">
<h1> User Config </h1>
<button type="button" className="userDashboard">
Back to User Dashboard
</button>
<div className="configCategoriesDrop">
<ButtonDropdown isOpen={dropdownCatOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Categories:
</DropdownToggle>
<DropdownMenu>{categories}</DropdownMenu>
</ButtonDropdown>
</div>
<div>
<ConfigDashboard />
</div>
</div>
);
}
Example #9
| Source File: index.js From relay_09 with MIT License | 6 votes |
|
MyNav = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="primary" light expand="md">
<NavbarBrand href="/" id="navItem">
<b>?하부리?</b>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="http://49.50.160.6:8080/">Chat</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>하부리란?</DropdownItem>
<DropdownItem>하부리 기능</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<NavbarText id="navItem">Latta is horse</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #10
| Source File: ProjectSelect.jsx From watchmo with MIT License | 5 votes |
|
function ProjectSelect() {
// setting the state for the drop down button with typescript
const [dropdownProjOpen, setProjOpen] = useState(false);
const { project, updateProject } = useContext(ProjectContext);
// these are used to grab data from watchmo and loaded it into the state
const [projsFromServer, setProjsFromServer] = useState([1, 2]);
const [projGained, setDataGained] = useState(false);
// function that is in charge of changing the state
const toggleCat = () => {
setProjOpen(!dropdownProjOpen);
};
useEffect(() => {
if (!projGained) {
fetch('/projectNames.json')
.then(data => data.json())
.then(parsed => {
setProjsFromServer(parsed);
});
setDataGained(true);
}
}, [projsFromServer]);
const projcategoriesInDropDown = [];
for (const projects of projsFromServer) {
projcategoriesInDropDown.push(
<DropdownItem key={projects} onClick={() => updateProject({ projects })}>
{projects}
</DropdownItem>
);
}
return (
<div id="projectSelect">
<div className="projDrop">
<ButtonDropdown isOpen={dropdownProjOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Projects:
</DropdownToggle>
<DropdownMenu>{projcategoriesInDropDown}</DropdownMenu>
</ButtonDropdown>
</div>
{project.projects && (
<div>
<div id="userDashBtn">
<Link to="/userDashBoard">
<Button size="md" type="button" className="btnSecondary">
DASHBOARD
</Button>
</Link>
</div>
<div id="configBtn">
<Link to="/configDash">
<Button type="button" className="btnSecondary">
CONFIG
</Button>
</Link>
</div>
</div>
)}
</div>
);
}
Example #11
| Source File: RevenueByLocations.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Col lg={4}>
<Card>
<CardBody>
<Dropdown className="float-right" isOpen={this.state.menu} toggle={() => this.setState({menu : !this.state.menu})}>
<DropdownToggle tag="i" className="darrow-none card-drop" aria-expanded="false">
<i className="mdi mdi-dots-vertical"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="">Sales Report</DropdownItem>
<DropdownItem href="">Export Report</DropdownItem>
<DropdownItem href="">Profit</DropdownItem>
<DropdownItem href="">Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<h4 className="card-title mb-4">Revenue by Locations</h4>
<div id="usa-vectormap" style={{height: "196px"}}>
<Vector
value="us_aea"
width="200"
color="#e8ecf4"
/>
</div>
<Row className="justify-content-center">
<Col xl={5} md={6}>
<div className="mt-2">
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2542</h5>
<p className="text-muted mb-0 text-truncate">California :</p>
</div>
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2245</h5>
<p className="text-muted mb-0 text-truncate">Nevada :</p>
</div>
</div>
</Col>
<Col xl={{size:5, offset:1}} md={6}>
<div className="mt-2">
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2156</h5>
<p className="text-muted mb-0 text-truncate">Montana :</p>
</div>
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 1845</h5>
<p className="text-muted mb-0 text-truncate">Texas :</p>
</div>
</div>
</Col>
</Row>
<div className="text-center mt-4">
<Link to="#" className="btn btn-primary btn-sm">Learn more</Link>
</div>
</CardBody>
</Card>
</Col>
</React.Fragment>
);
}
Example #12
| Source File: Navbars.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
{/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
{/*waiting for [email protected]*/}
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
</CardHeader>
<CardBody>
<Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
</div>
);
}
Example #13
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { isOpen, isOpenToggler } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Navbar</strong>
</h5>
<div className="mb-5">
<Navbar color="light" expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
<h5 className="mb-4">
<strong>Navbar Toggler</strong>
</h5>
<div className="mb-5">
<Navbar color="faded">
<NavbarBrand href="/" className="mr-auto">
reactstrap
</NavbarBrand>
<NavbarToggler onClick={this.toggleToggler} className="mr-2" />
<Collapse isOpen={!isOpenToggler} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
</div>
)
}
Example #14
| Source File: Header.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
Header = () => {
const { isAuthenticated, user, loginUrl } = React.useContext(authContext);
const { authUrl, logoutRedirectUrl } = React.useContext(configContext);
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(!isOpen);
const logoutUrl = `${authUrl}/logout?returnUrl=${logoutRedirectUrl}`;
return (
<div>
<Navbar color="light" light expand="md">
<NavbarBrand tag={Link} to="/">
EdLib Admin
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
{!isAuthenticated && (
<NavItem>
<NavLink href={loginUrl}>Login</NavLink>
</NavItem>
)}
{user && (
<>
<NavItem>
<NavLink tag={Link} to="/system-status">
System status
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
{user.firstName} {user.lastName}
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag="a" href={logoutUrl}>
Logg ut
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</>
)}
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #15
| Source File: Job.component.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
Job = ({ job }) => {
const {
userId,
jobTitle,
jobCreatorLogo,
jobLocation,
// jobApplyURL,
jobCreator,
dateModified,
jobDescription,
jobWorkType,
} = job;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
return (
<ListGroupItem className="job-card" key={userId}>
<div className="d-flex flex-column">
<div className="job-card--header mb-3">
{jobCreatorLogo ? (
<img className="job-image" src={jobCreatorLogo} alt={jobCreator} />
) : (
<h3 className="company mr-4">{jobCreator}</h3>
)}
<span className="text-tiny job-time">
{moment(dateModified).fromNow()}
</span>
<Dropdown
className="drop-down-icon"
isOpen={dropdownOpen}
toggle={toggle}
>
<DropdownToggle>
<FontAwesomeIcon icon={faEllipsisV} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FontAwesomeIcon icon={faHeart} className="mr-1" /> Save Job
</DropdownItem>
<DropdownItem>
<FontAwesomeIcon icon={faBan} className="mr-2" />
Not Interested
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="mr-auto">
<h4 className="job-card--title text-dark">{jobTitle}</h4>
<h6 className="text-muted">
<FontAwesomeIcon icon={faMapMarkerAlt} />
<span className="ml-2">{jobLocation}</span>
</h6>
<p>
{jobDescription.replace(/(<([^>]+)>)/gi, "").substring(0, 100)} ...
</p>
<Badge className="p-2 mt-1 mr-2" color="primary">
{jobWorkType}
</Badge>
</div>
</div>
</ListGroupItem>
);
}
Example #16
| Source File: NavBar.js From covid19 with MIT License | 5 votes |
|
render() {
const { scale, lang, darkMode, languageToggle } = this.props
return (
<div className="nav-bar">
<UncontrolledDropdown>
<DropdownToggle
tag="div"
className="nav-bar-icon"
data-toggle="dropdown"
data-tip={i18n.LANGUAGE_HELP_TEXT[lang]}
>
{i18n.LANGUAGE[lang]}
</DropdownToggle>
<DropdownMenu>
{Object.keys(i18n.LANGUAGE).map((x) => (
<DropdownItem
key={x}
className={x === lang ? 'current' : ''}
onClick={() => languageToggle(x)}
>
{i18n.LANGUAGE[x]}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.props.darkModeToggle}>
{darkMode ? i18n.DARK[lang] : i18n.LIGHT[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={darkMode ? i18n.LIGHT_MODE_HELP_TEXT[lang] : i18n.DARK_MODE_HELP_TEXT[lang]}
onClick={this.props.darkModeToggle}
onMouseEnter={() =>
this.setState({
darkModeText: darkMode ? i18n.LIGHT[lang] : i18n.DARK[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.darkModeText}
</div>
)}
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.onScaleChange}>
{scale === 'linear' ? i18n.LINEAR_SCALE[lang] : i18n.LOG_SCALE[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={
scale === 'linear' ? i18n.LOG_SCALE_HELP_TEXT[lang] : i18n.LINEAR_SCALE_HELP_TEXT[lang]
}
onClick={this.onScaleChange}
onMouseEnter={() =>
this.setState({
scaleText: scale === 'linear' ? i18n.LOG_SCALE[lang] : i18n.LINEAR_SCALE[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.scaleText}
</div>
)}
<div className="nav-bar-icon" data-tip={i18n.RESET_HELP_TEXT[lang]} onClick={this.props.reset}>
{i18n.RESET[lang]}
</div>
</div>
)
}
Example #17
| Source File: index.js From strapi-plugins with MIT License | 5 votes |
|
Logout = ({ history: { push } }) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(prev => !prev);
// -- add this role variable --
const role = get(auth.getUserInfo(), 'role') || 'admin';
// -- --- --
const handleGoTo = () => {
const id = get(auth.getUserInfo(), 'id');
push({
pathname: `/plugins/content-manager/collectionType/strapi::administrator/${id}`,
search: '?redirectUrl=/plugins/content-manager/collectionType/strapi::administrator',
});
};
const handleGoToAdministrator = () => {
push({
pathname: '/plugins/content-manager/collectionType/strapi::administrator',
});
};
const handleLogout = () => {
auth.clearAppStorage();
// -- send reload notice for login page using 'location.state'
// -- so we refresh to re-fetch content-types for a new user role
push('/auth/login', { reload: true });
// -- --- --
};
return (
<Wrapper>
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle>
{get(auth.getUserInfo(), 'username')}
<FontAwesomeIcon icon="caret-down" />
</DropdownToggle>
<DropdownMenu className="dropDownContent">
{/* -- add this condition -- */}
{role === 'admin' && (
<>
<DropdownItem onClick={handleGoTo} className="item">
<FormattedMessage id="app.components.Logout.profile" />
</DropdownItem>
<DropdownItem onClick={handleGoToAdministrator} className="item">
<FormattedMessage id="app.components.Logout.admin" />
</DropdownItem>
</>
)}
{/* -- --- -- */}
<DropdownItem onClick={handleLogout}>
<FormattedMessage id="app.components.Logout.logout" />
<FontAwesomeIcon icon="sign-out-alt" />
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</Wrapper>
);
}
Example #18
| Source File: UserDropDown.js From covidsos with MIT License | 5 votes |
|
render() {
const {className, dropDownToggleClassName} = this.props;
const loggedIn = isLoggedIn();
const username = (loggedIn && localStorage.getItem(config.fullNameStorageKey)) || 'Login';
return (
<Nav className={className} navbar>
<UncontrolledDropdown nav>
<DropdownToggle className={dropDownToggleClassName} nav>
<Media className="align-items-center">
<span className="avatar avatar-sm rounded-circle">
<i className="fas fa-user"/>
</span>
<Media className="ml-2 d-none d-lg-block">
<span className="mb-0 text-sm font-weight-bold">
{username}
</span>
</Media>
</Media>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{loggedIn ?
<>
<DropdownItem href="#" onClick={e => {
localStorage.clear();
e.preventDefault();
this.props.history.push("/");
}}>
<i className="ni ni-user-run"/>
<span>Logout</span>
</DropdownItem>
</>
:
<>
<DropdownItem href="#" onClick={() => this.props.history.push("/login")}>
<i className="fas fa-user"/>
<span>Volunteer</span>
</DropdownItem>
<DropdownItem href="#" onClick={() => this.props.history.push("/admin-login")}>
<i className="fas fa-users"/>
<span>Admin</span>
</DropdownItem>
</>
}
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
)
;
}
Example #19
| Source File: navbar.component.js From blogApp with MIT License | 5 votes |
|
render() {
return (
<Navbar color='dark' dark expand='lg'>
<Link
to='/'
className='navbar-brand'
style={{ fontFamily: "Monoton", fontWeight: "100" }}>
<img
src={logo}
style={{ maxWidth: "40px" }}
className='mx-2'
/>
BlogApp
</Link>
<NavbarToggler onClick={this.toggle} />{" "}
<Collapse isOpen={this.state.isOpen} navbar>
{this.state.user ? (
<Nav className='ml-auto mr-2' navbar>
<NavItem className='navbar-item'>
<ButtonDropdown
isOpen={this.state.isDropdownOpen}
toggle={this.dropdownToggle}>
<Button id='caret' color='primary'>
<FontAwesomeIcon
icon={faUser}
className='mr-2'
/>
{this.state.user.username}
</Button>
<DropdownToggle caret color='primary' />
<DropdownMenu right>
<Link
to='/myblogs/'
className='dropdown-item'>
My Blogs
</Link>
<DropdownItem divider />
<DropdownItem onClick={this.logout}>
logout
<FontAwesomeIcon
icon={faSignOutAlt}
className='ml-3'
/>
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</NavItem>
</Nav>
) : (
<Nav className='ml-auto' navbar>
<NavItem className='navbar-item'>
<Link className='nav-link' to='/login'>
Login
</Link>
</NavItem>
</Nav>
)}
</Collapse>
</Navbar>
);
}
Example #20
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user_id } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
history.push("/")
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
console.log(sport)
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Cancel
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #21
| Source File: Navs.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>Navs</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<p>List Based</p>
<Nav>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<hr />
<p>Link Based</p>
<Nav>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs Tabs</strong>
</CardHeader>
<CardBody>
<Nav tabs>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0);}}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs Pills</strong>
</CardHeader>
<CardBody>
<Nav pills>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs Vertical</strong>
</CardHeader>
<CardBody>
<p>List Based</p>
<Nav vertical>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<hr />
<p>Link based</p>
<Nav vertical>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav>
</CardBody>
</Card>
</div>
);
}
Example #22
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user_id } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
console.log(sport)
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Dashboard
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #23
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { activeTab } = this.state
return (
<div>
<div className="row">
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>No Bottom Border</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-noborder">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Icons</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Justified Pills</strong>
</h5>
<div className="mb-5">
<Nav pills justified>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Icons</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-12">
<h5 className="mb-4">
<strong>Vertical Pills</strong>
</h5>
<div className="mb-5">
<div className="row">
<div className="col-3">
<Nav pills vertical>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</div>
<div className="col-9">
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
When an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="3">
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
</TabContent>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #24
| Source File: Navbars.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section>
<Container>
{/* Navigation */}
<h2 className="mb-5">
<span>Navbars</span>
</h2>
</Container>
{/* Navbar default */}
<Navbar className="navbar-dark bg-default" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Default Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-default">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-default">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-default">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-default_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar primary */}
<Navbar className="navbar-dark bg-primary mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Primary Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-primary">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar success */}
<Navbar className="navbar-dark bg-success mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Success Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-success">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Favorites
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-planet" />
<span className="nav-link-inner--text d-lg-none">
Another action
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar danger */}
<Navbar className="navbar-dark bg-danger mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Danger Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-danger">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-danger">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-danger">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Facebook
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Twitter
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-google-plus" />
<span className="nav-link-inner--text d-lg-none">
Google +
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none">
Instagram
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar warning */}
<Navbar className="navbar-dark bg-warning mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Warning Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-warning">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-warning">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-warning">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Share
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Tweet
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-pinterest" />
<span className="nav-link-inner--text d-lg-none">
Pin
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar info */}
<Navbar className="navbar-dark bg-info mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Info Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-info">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-info">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-info">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square mr-1" />
<span className="nav-link-inner--text">Facebook</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter mr-1" />
<span className="nav-link-inner--text">Twitter</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram mr-1" />
<span className="nav-link-inner--text">Instagram</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</section>
</>
);
}
Example #25
| Source File: Dropdowns.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[0]} toggle={() => {
this.toggle(0);
}}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> alignment</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle caret>
This dropdown's menu is right-aligned
</DropdownToggle>
<DropdownMenu right style={{right: 'auto'}}>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> sizing</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[2]} toggle={() => {this.toggle(2);}} size="lg" className="mb-3">
<DropdownToggle caret>
Large Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => {this.toggle(3);}} className="mb-3">
<DropdownToggle caret>
Normal Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[4]} toggle={() => {this.toggle(4);}} size="sm">
<DropdownToggle caret>
Small Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
<DropdownToggle
tag="span"
onClick={() => {this.toggle(5);}}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen[5]}
>
Custom Dropdown Content <strong> * </strong>
</DropdownToggle>
<DropdownMenu>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
<div className="dropdown-item-text" onClick={() => {this.toggle(5);}}>Custom dropdown text 3</div>
<hr className="my-0 dropdown-item-text" />
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Uncontrolled Dropdown</strong>
</CardHeader>
<CardBody>
<UncontrolledDropdown>
<DropdownToggle caret>
Uncontrolled Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #26
| Source File: DemoNavbar.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand className="mr-lg-5" to="/" tag={Link}>
<img
alt="..."
src={require("../../assets//img/brand/argon-react-white.png")}
/>
</NavbarBrand>
<button className="navbar-toggler" id="navbar_global">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar_global">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("../../assets//img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar_global">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="navbar-nav-hover align-items-lg-center" navbar>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-ui-04 d-lg-none mr-1" />
<span className="nav-link-inner--text">Components</span>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-xl">
<div className="dropdown-menu-inner">
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/overview?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
<i className="ni ni-spaceship" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Getting started
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn how to use Argon compiling Scss, change
brand colors and more.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/colors?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-palette" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Foundation
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn more about colors, typography, icons and the
grid system we used for Argon.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alert?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-ui-04" />
</div>
<Media body className="ml-3">
<h5 className="heading text-warning mb-md-1">
Components
</h5>
<p className="description d-none d-md-inline-block mb-0">
Browse our 50 beautiful handcrafted components
offered in the Free version.
</p>
</Media>
</Media>
</div>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-collection d-lg-none mr-1" />
<span className="nav-link-inner--text">Examples</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/" tag={Link}>
Landing
</DropdownItem>
<DropdownItem to="/profile" tag={Link}>
Profile
</DropdownItem>
<DropdownItem to="/login" tag={Link}>
Login
</DropdownItem>
<DropdownItem to="/addpost" tag={Link}>
Add Post
</DropdownItem>
<DropdownItem to="/posts" tag={Link}>
List Posts
</DropdownItem>
<DropdownItem to="/register" tag={Link}>
Register
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.facebook.com/creativetim"
id="tooltip333589074"
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip333589074">
Like us on Facebook
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.instagram.com/creativetimofficial"
id="tooltip356693867"
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip356693867">
Follow us on Instagram
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://twitter.com/creativetim"
id="tooltip184698705"
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip184698705">
Follow us on Twitter
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://github.com/creativetimofficial/argon-design-system-react"
id="tooltip112445449"
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip112445449">
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #27
| Source File: ButtonDropdowns.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>
<DropdownToggle caret>
Button Dropdown
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Single button dropdowns</strong>
</CardHeader>
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
<DropdownToggle caret color="primary">
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[2]} toggle={() => { this.toggle(2); }}>
<DropdownToggle caret color="secondary">
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[3]} toggle={() => { this.toggle(3); }}>
<DropdownToggle caret color="success">
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[4]} toggle={() => { this.toggle(4); }}>
<DropdownToggle caret color="info">
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[5]} toggle={() => { this.toggle(5); }}>
<DropdownToggle caret color="warning">
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[6]} toggle={() => { this.toggle(6); }}>
<DropdownToggle caret color="danger">
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Split button dropdowns</strong>
</CardHeader>
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[7]} toggle={() => { this.toggle(7); }}>
<Button id="caret" color="primary">Primary</Button>
<DropdownToggle caret color="primary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[8]} toggle={() => { this.toggle(8); }}>
<Button id="caret" color="secondary">Secondary</Button>
<DropdownToggle caret color="secondary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[9]} toggle={() => { this.toggle(9); }}>
<Button id="caret" color="success">Success</Button>
<DropdownToggle caret color="success" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[10]} toggle={() => { this.toggle(10); }}>
<Button id="caret" color="info">Info</Button>
<DropdownToggle caret color="info" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[11]} toggle={() => { this.toggle(11); }}>
<Button id="caret" color="warning">Warning</Button>
<DropdownToggle caret color="warning" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[12]} toggle={() => { this.toggle(12); }}>
<Button id="caret" color="danger">Danger</Button>
<DropdownToggle caret color="danger" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdown directions</strong>
</CardHeader>
<CardBody>
<ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[13]} toggle={() => { this.toggle(13); }}>
<DropdownToggle caret size="lg">
Direction Up
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[14]} toggle={() => { this.toggle(14); }}>
<DropdownToggle caret size="lg">
Direction Left
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
<DropdownToggle caret size="lg">
Direction Right
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}>
<DropdownToggle caret size="lg">
Default Down
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong>
</CardHeader>
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}>
<DropdownToggle caret size="lg">
Large Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}>
<DropdownToggle caret size="sm">
Small Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #28
| Source File: PodDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const apilistinfo = this.state.apilistinfo;
const involveData = this.state.involveData;
const { params } = this.props.match;
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<PodDetail_detail apilistinfo={apilistinfo} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailResorce apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailResorce apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <PoddetailMeta apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PoddetailMeta apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
{/* <PodStatus apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodStatus apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
{Object.keys(apilistinfo).length !== 0 ? <PodDetailMonit apilistinfo={apilistinfo} /> : <></>}
{/* <PodDetailMonit apilistinfo={apilistinfo} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailEvent apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailEvent apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #29
| Source File: MapNavBar.js From covid19 with MIT License | 4 votes |
|
render() {
const { lang, metric, currentMap, fullPlot, fullTree, plotType } = this.props
return (
<div className={`map-nav-bar-wrap ${fullPlot && !plotTypes[plotType].metricChange ? 'grey-out' : ''}`}>
<ul className="map-nav-bar">
{[ 'confirmedCount', 'deadCount', 'curedCount' ].map((count) => (
<li key={`map-nav-${count}`} className={count === metric ? 'current' : ''}>
<div value={count} onClick={this.metricToggle}>
{metricText[count][lang]}
</div>
</li>
))}
</ul>
{!fullPlot &&
!fullTree && (
<UncontrolledDropdown className="map-toggle">
<DropdownToggle
className="map-toggle-button"
tag="span"
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
>
<FiMap size={14} style={{ marginRight: 10 }} />
<span>{mapText[currentMap].title[lang]}</span>
</DropdownToggle>
<DropdownMenu
modifiers={{
setMaxHeight: {
enabled: true,
order: 890,
fn: (data) => {
return {
...data,
styles: {
...data.styles,
overflowY: 'auto',
maxHeight: this.state.height * 0.5
}
}
}
}
}}
>
{[
'Global',
'Asia',
'Europe',
'North America',
'South America',
'Oceania',
'Africa',
null
].map((continent) =>
Object.keys(mapText)
.filter(
(map) =>
mapText[map].continent === continent ||
(mapText[map].continent && mapText[map].continent['en'] === continent)
)
.map((map, idx) => {
return (
<Fragment key={`map-${idx}`}>
{map === str.TRANSMISSION ? <DropdownItem divider /> : <div />}
{idx === 0 && continent != null && continent !== 'Global' ? (
<Fragment>
<DropdownItem divider />
<DropdownItem header>
{mapText[map].continent[lang]}
</DropdownItem>
</Fragment>
) : (
<div />
)}
<DropdownItem
className={currentMap === map ? 'current' : ''}
onClick={() => this.mapToggle(map)}
>
{map !== str.TRANSMISSION && (
<span
className={`flag-icon ${mapText[map].flagCode
? 'flag-icon-' + mapText[map].flagCode
: ''}`}
/>
)}
{mapText[map].title[lang]}
</DropdownItem>
</Fragment>
)
})
)}
</DropdownMenu>
</UncontrolledDropdown>
)}
</div>
)
}
