reactstrap#Collapse JavaScript Examples
The following examples show how to use
reactstrap#Collapse.
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 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 #2
| Source File: TopNav.js From mern-course-bootcamp with MIT License | 6 votes |
|
TopNav = () => {
const { isLoggedIn, setIsloggedIn } = useContext(UserContext);
const [collapsed, setCollapsed] = useState(true);
const toggleNavbar = () => setCollapsed(!collapsed);
const logoutHandler = () => {
localStorage.removeItem('user')
localStorage.removeItem('user_id')
setIsloggedIn(false)
}
return isLoggedIn ?
<div>
<Navbar color="faded" light>
<NavbarToggler onClick={toggleNavbar} />
<Link to="/login" onClick={logoutHandler}>Logout</Link>
<Collapse isOpen={!collapsed} navbar>
<Nav navbar>
<NavItem>
<Link to="/events">Events</Link>
</NavItem>
<NavItem>
<Link to="/">Dashboard</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
: ""
}
Example #3
| Source File: help.js From hivemind with Apache License 2.0 | 6 votes |
|
CollapsibleExample = ({ children }) => {
const [isOpen, setOpen] = useState(false)
const toggle = () => setOpen(!isOpen)
return (
<>
<Button
size="sm"
color="primary"
onClick={() => toggle()}
style={{ marginBottom: '1rem' }}
>
{isOpen ? (
<>
<Minimize2 /> Close
</>
) : (
<>
<Maximize2 /> Open
</>
)}{' '}
Example
</Button>
<Collapse isOpen={isOpen}>{children}</Collapse>
<hr />
</>
)
}
Example #4
| Source File: Topbar.js From GB-GCGC with MIT License | 6 votes |
|
Topbar = ({ toggleSidebar }) => {
const [topbarIsOpen, setTopbarOpen] = useState(true);
const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);
return (
<Navbar
className="navbar shadow-sm p-2 mb-5 rounded"
expand="lg"
style={{ backgroundColor: "#767B91", color: "white" }}
>
<Button color="info" onClick={toggleSidebar}>
<FontAwesomeIcon icon={faAlignLeft} />
</Button>
<NavbarToggler onClick={toggleTopbar} />
<Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
<div className="ml-auto pt-2">
<img src={require("./Pic1.jpeg")} align="right" width="80px" height="100px" />
<p align="center">
{" "}
Welcome Kishor Buddha
</p>
</div>
</Collapse>
</Navbar>
);
}
Example #5
| Source File: Topbar.js From GB-GCGC with MIT License | 6 votes |
|
Topbar = ({ toggleSidebar }) => {
const [topbarIsOpen, setTopbarOpen] = useState(true);
const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);
return (
<Navbar
color="light"
light
className="navbar shadow-sm p-2 mb-5 bg-white navbar navbar-lg"
expand="lg"
>
<Button color="info" onClick={toggleSidebar}>
<FontAwesomeIcon icon={faAlignLeft} />
</Button>
<NavbarToggler onClick={toggleTopbar} />
<Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
<div className="ml-auto pt-2">
<img src={require("./Pic1.jpeg")} align="right" width="75px"/>
<p className="pt-3" align="center">
{" "}
Welcome Kishor Buddha
</p>
</div>
</Collapse>
</Navbar>
);
}
Example #6
| Source File: Topbar.js From GB-GCGC with MIT License | 6 votes |
|
Topbar = ({ toggleSidebar }) => {
const [topbarIsOpen, setTopbarOpen] = useState(true);
const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);
return (
<Navbar
className="navbar shadow-sm p-2 mb-5 navbar-fixed-top"
expand="lg"
style={{ backgroundColor: "#767B91", color: "white" }}
>
<Button color="info" onClick={toggleSidebar}>
<FontAwesomeIcon icon={faAlignLeft} />
</Button>
<NavbarToggler onClick={toggleTopbar} />
<Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
<div className="ml-auto pt-2">
<img src={require("./Pic1.jpeg")} align="right" width="75px" />
<p className="pt-3" align="center">
{" "}
Welcome Kishor Buddha
</p>
</div>
</Collapse>
</Navbar>
);
}
Example #7
| Source File: TopNav.js From mern-course-bootcamp with MIT License | 6 votes |
|
TopNav = () => {
const { isLoggedIn, setIsloggedIn } = useContext(UserContext);
const [collapsed, setCollapsed] = useState(true);
const toggleNavbar = () => setCollapsed(!collapsed);
const logoutHandler = () => {
localStorage.removeItem('user')
localStorage.removeItem('user_id')
setIsloggedIn(false)
}
return isLoggedIn ?
<div>
<Navbar color="faded" light>
<NavbarToggler onClick={toggleNavbar} />
<Link to="/login" onClick={logoutHandler}>Logout</Link>
<Collapse isOpen={!collapsed} navbar>
<Nav navbar>
<NavItem>
<Link to="/events">Events</Link>
</NavItem>
<NavItem>
<Link to="/">Dashboard</Link>
</NavItem>
<NavItem>
<Link to="/myregistrations">My Registrations</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
: ""
}
Example #8
| 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 #9
| Source File: Header.jsx From aglomerou with GNU General Public License v3.0 | 6 votes |
|
Header = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar className={styles.header} color="light" light expand="md">
<NavbarBrand href="https://ifto-palmas.github.io/aglomerou/">
<img className={styles.image} src={logoImage} alt="Logo aglomerou"></img>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#">Notificações</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://coronavirus.palmas.to.gov.br/">COVID-19</NavLink>
</NavItem>
</Nav>
<NavbarText>IFTO</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #10
| Source File: Header.js From agenda with MIT License | 6 votes |
|
render() {
const {isVisible} = this.state;
return (
<div>
<IntersectionVisible
onHide={e => this.onHide(e)}
onShow={e => this.onShow(e)}
>
<header className="hidden-print">
<Media object src={logo} className="logo d-flex justify-content-center"/>
<Navbar expand="lg" fixed={!isVisible ? 'top' : ''}>
<NavbarToggler onClick={() => this.toggleNavbar()}/>
<Collapse isOpen={this.state.isCollapse} navbar>
<NavItems
redirect={route => this.redirect(route)}
/>
</Collapse>
</Navbar>
</header>
</IntersectionVisible>
</div>
);
}
Example #11
| Source File: navbar1.js From web-frontend with MIT License | 6 votes |
|
Example = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div id="topNav">
<Navbar color="light" className="topNav" light expand="md">
<Link to="banner" smooth="true" duration={1000}>
<img alt="Palembang Digital" src={"/logo.jpg"} width="50px" />
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<Link to={`/`} smooth="true" duration={1000} className="NavLink">
Acara
</Link>
<Link to={`/`} smooth="true" duration={1000} className="NavLink">
Tentang
</Link>
<Link to={`/`} smooth="true" duration={1000} className="NavLink">
Kontak
</Link>
<NavLink href="/patal-team" className="NavLink">
Team
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #12
| 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 #13
| Source File: Navbar.js From Blogs with MIT License | 5 votes |
|
Menu = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
let brandName = useRef(null);
let pageLink1 = useRef(null);
let pageLink2 = useRef(null);
let pageLink3 = useRef(null);
let tl = new TimelineLite();
useEffect(() => {
tl.from(brandName, 4, { x: -500, ease: Power3.easeOut }, 0)
.from(pageLink1, 3, { x: 1000, ease: Power3.easeOut }, 0)
.from(pageLink2, 3, { x: 1100, ease: Power3.easeOut }, 0)
.from(pageLink3, 3, { x: 1200, ease: Power3.easeOut }, 0);
});
return (
<Navbar light expand="md" className="background-blue sticky-top">
<div className="container">
<NavbarBrand href="/" style={{ fontWeight: "bold", color: "#eee" }}>
<div ref={(el) => (brandName = el)}>
<img src="/img/logowhite.png" alt="" style={{ width: "30px" }} />{" "}
KJSCE CodeCell
</div>
</NavbarBrand>
<NavbarToggler onClick={toggle} style={{ background: "#666" }} />
<Collapse
isOpen={isOpen}
navbar
style={{
justifyContent: "space-between",
}}
>
<Nav className="ml-auto" navbar>
<div ref={(el) => (pageLink1 = el)}>
<NavItem className="mr-3">
<Link to="/" className="links mr-2">
<HouseFill size={20} /> Home
</Link>
</NavItem>
</div>
<div ref={(el) => (pageLink2 = el)}>
<NavItem className="mr-3">
<Link to="/blog" className="links mr-2">
<Grid1x2Fill /> All Articles
</Link>
</NavItem>
</div>
<div ref={(el) => (pageLink3 = el)}>
<NavItem>
<Link to="/about" className="links">
<CodeSlash size={20} /> About
</Link>
</NavItem>
</div>
</Nav>
</Collapse>
</div>
</Navbar>
);
}
Example #14
| 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 #15
| Source File: Navbar.jsx From portfolyo-mern with MIT License | 5 votes |
|
NavBar = (props) => {
const [isOpen, setIsOpen] = useState(false);
const H = useHistory();
const toggle = () => setIsOpen(!isOpen);
const logout = () => {
const token = localStorage.getItem("token");
localStorage.removeItem("token");
axios.get(`${Baseurl}/logout/${token}`).then((res)=>{
}).catch(()=>{
});
H.push("/");
}
return (
<div>
<Navbar
light
expand="md"
style={{
backgroundColor: "#161616",
}}
>
<NavbarBrand href="/">
<img src={portfolyo} className="navbarBrand"></img>
</NavbarBrand>
<NavbarToggler
onClick={toggle}
style={{
backgroundColor: "#ffffff",
}}
/>
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto navbarNav" navbar>
<NavItem className="mx-auto navitemNavBar">
<NavLink className="navItemNavLink" href="/#/mywebsites/">
Your Websites
</NavLink>
</NavItem>
<NavItem className="mx-auto">
<NavLink
className="navItemNavLink"
style={{
color: "#ffffff",
cursor:"pointer"
}}
onClick={logout}
>
Logout
</NavLink>
</NavItem>
{/* <UncontrolledDropdown nav inNavbar>
<DropdownToggle
nav
caret
style={{
color: "#ffffff",
}}
>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown> */}
</Nav>
{/* <NavbarText
style={{
color: "#ffffff",
}}
>
Simple Text
</NavbarText> */}
</Collapse>
</Navbar>
</div>
);
}
Example #16
| Source File: navbar.js From web-frontend with MIT License | 5 votes |
|
NavbarDefault = () => {
const [isOpen, setIsOpen] = useState(false);
const [currentPath, setCurrentPath] = useState("");
const toggle = () => setIsOpen(!isOpen);
useEffect(() => {
if (typeof window !== "undefined") {
setCurrentPath(window.location.pathname);
}
}, [currentPath]);
return (
<div id="topNav">
<Navbar color="light" className="topNav" light expand="md">
<GatsbyLink to="/">
<img alt="Palembang Digital" src={"/logo.png"} width="50px" />
</GatsbyLink>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`event`}
smooth={true}
duration={1000}
className="NavLink">
Acara
</Link>
) : (
<GatsbyLink to="/#event" className="NavLink">
Acara
</GatsbyLink>
)}
</NavItem>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`tentang`}
smooth={true}
duration={1000}
className="NavLink">
Tentang
</Link>
) : (
<GatsbyLink to="/#tentang" className="NavLink">
Tentang
</GatsbyLink>
)}
</NavItem>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`footer`}
smooth={true}
duration={1000}
className="NavLink">
Kontak
</Link>
) : (
<GatsbyLink to="/#footer" className="NavLink">
Kontak
</GatsbyLink>
)}
</NavItem>
<NavItem
className={currentPath.startsWith("/patal-team") ? "active" : ""}>
<GatsbyLink to="/patal-team" className="NavLink">
Tim
</GatsbyLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #17
| Source File: NavBar.js From ReactJS-Projects with MIT License | 5 votes |
|
NavBar = () => {
const context = useContext(UserContext)
const [isToggled, setIsToggled] = useState(false)
const toggle = () => setIsToggled(!isToggled)
return (
<Navbar
color="danger"
light
expand="md"
>
<NavbarBrand>
<Link to="/" className='text-white'>Github Repo Search App</Link>
</NavbarBrand>
<NavbarText className='text-white'>
Welcome, {context.user?.email ? context.user?.email : ""}
</NavbarText>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isToggled} navbar>
<Nav navbar style={{ marginLeft: "auto" }}>
{
context.user ?
(
<NavItem>
<NavLink onClick={() => { context.setUser(null) }} className='text-white'>
Logout
</NavLink>
</NavItem>
) :
(
<>
<NavItem>
<NavLink tag={Link} to="/signup" className='text-white'>
Signup
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/signin" className='text-white'>
Signin
</NavLink>
</NavItem>
</>
)
}
</Nav>
</Collapse>
</Navbar>
)
}
Example #18
| Source File: Header.js From covidAnalytics with MIT License | 5 votes |
|
Header = (props)=>{
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div className="ContainerNav">
<Navbar light expand="md" className="md-5 portalImg">
<Collapse navbar>
<Nav navbar>
<NavItem>
<NavLink href="https://www.furg.br/">
<img class="furg" src={logoFurg} alt="Logo Furg"/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="http://www.c3.furg.br/">
<img class="c3" src={logoC3} alt="Logo C3"/>
</NavLink>
</NavItem>
</Nav>
</Collapse>
<NavbarBrand className=" mx-auto logo-title">
<Link to="/" className="Headerlinks"><FontAwesomeIcon icon={faVirus} />
ITeCCorona
</Link>
</NavbarBrand>
<NavbarToggler onClick={toggle} className="mr-2"/>
<Collapse isOpen={isOpen} navbar>
<Nav className="navPortal ml-auto">
<NavItem className="portal">
<NavLink className="LinkTitle" href="http://www.riogrande.rs.gov.br/corona/">
Portal
</NavLink>
</NavItem>
<NavItem className="portal">
<NavLink className="LinkTitle" >
<Link to="/about" className="LinkTitle " >
Sobre nós
</Link>
</NavLink>
</NavItem>
<NavItem className="portal">
<NavLink className="LinkTitle" href="https://github.com/Gabriellavoura/covidAnalytics">
Github
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #19
| 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 #20
| 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 #21
| Source File: accordian.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card>
<Link to="#" className="text-dark" onClick={this.t_col1} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingOne">
<h5 className="font-size-14 m-0">
<i className={this.state.col1 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question1}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col1}>
<CardBody>
{this.props.answer1}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col2} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingTwo">
<h5 className="font-size-14 m-0">
<i className={this.state.col2 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question2}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col2} >
<CardBody>
{this.props.answer2}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col3} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingThree">
<h5 className="font-size-14 m-0">
<i className={this.state.col3 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question3}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col3}>
<CardBody>
{this.props.answer3}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col4} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingFour">
<h5 className="font-size-14 m-0">
<i className={this.state.col4 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i>{this.props.question4}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col4}>
<CardBody>
{this.props.answer4}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col5} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingFive">
<h5 className="font-size-14 m-0">
<i className={this.state.col5 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question5}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col5}>
<CardBody>
{this.props.answer5}
</CardBody>
</Collapse>
</Card>
</React.Fragment>
);
}
Example #22
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { collapse } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Collapse</strong>
</h5>
<div className="mb-5">
<div className="mb-5">
<div className="accordion">
<div className="card">
<div className="card-header" id="headingOne">
<div className="card-title">
<span className="accordion-indicator pull-right">
<i className="plus fe fe-plus" />
<i className="minus fe fe-minus" />
</span>
<a>Collapsible Group Item #1</a>
</div>
</div>
<UncontrolledCollapse toggler="#headingOne">
<div className="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</div>
</UncontrolledCollapse>
</div>
<div className="card">
<div className="card-header" id="headingTwo">
<div className="card-title">
<span className="accordion-indicator pull-right">
<i className="plus fe fe-plus" />
<i className="minus fe fe-minus" />
</span>
<a>Collapsible Group Item #2</a>
</div>
</div>
<UncontrolledCollapse toggler="#headingTwo">
<div className="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</div>
</UncontrolledCollapse>
</div>
<div className="card">
<div className="card-header" id="headingThree">
<div className="card-title">
<span className="accordion-indicator pull-right">
<i className="plus fe fe-plus" />
<i className="minus fe fe-minus" />
</span>
<a>Collapsible Group Item #3</a>
</div>
</div>
<UncontrolledCollapse toggler="#headingThree">
<div className="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</div>
</UncontrolledCollapse>
</div>
</div>
</div>
</div>
<h5 className="mb-4">
<strong>YTarget Collapse</strong>
</h5>
<div>
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>
Toggle
</Button>
<Collapse isOpen={collapse}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</div>
</div>
)
}
Example #23
| Source File: index.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let {
headerBackgroundColor,
enableMobileMenuSmall,
enableHeaderShadow
} = this.props;
return (
<Fragment>
<NewAuctionAssembler
isOpen={this.state.auctionModal}
close={() => this.setState({auctionModal: !this.state.auctionModal})}
assemblerModal={this.toggleAssemblerModal}
/>
<SendModal
isOpen={this.state.assemblerModal}
close={this.toggleAssemblerModal}
bidAmount={this.state.bidAmount}
isAuction={this.state.isAuction}
bidAddress={this.state.bidAddress}
currency={this.state.currency}
/>
<Refund
isOpen={this.state.refund}
close={() => this.setState({refund: false})}
/>
<NewArtwork
sendModal={this.toggleAssemblerModal}
isOpen={this.state.newArtworkModal}
close={() => this.setState({newArtworkModal: !this.state.newArtworkModal})}/>
<div id='myHeader' style={{zIndex: '10'}}>
<ReactCSSTransitionGroup
component="div"
className={cx("app-header", false, {'header-shadow': true})}
transitionName="HeaderAnimation"
transitionAppear={true}
transitionAppearTimeout={150}
transitionEnter={false}
transitionLeave={false}>
<Navbar color="white" light expand="md">
<NavbarBrand href="/">
<img
style={{height: '40px'}}
src={nodeWallet}
/>
</NavbarBrand>
<NavbarToggler onClick={() => this.setState({isOpen: !this.state.isOpen})}/>
<Collapse isOpen={this.state.isOpen} navbar>
<Col md='9'>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#/auction/active?type=all"
active={window.location.href.includes("#/auction/active")}>Active
Auctions</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/auction/history"
active={window.location.href.includes("#/auction/history")}
>Past Auctions</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/owned"
active={window.location.href.includes("#/owned")}
>Owned Artworks</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => this.setState({refund: true})}>
Refund
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/faq"
active={window.location.href.includes("#/faq")}
>
FAQ
</NavLink>
</NavItem>
{/*<div className="search-container">*/}
<div className="search-box">
<form className="d-flex justify-content-between align-items-center"
onSubmit={(e) => {
e.preventDefault();
this.updateParams('searchValue', this.state.searchValue)
}}>
{/*< className="">*/}
<input
placeholder="Search in name, description and addresses"
value={this.state.searchValue}
onChange={(e) => {
this.setState({searchValue: e.target.value})
}}
/>
<button className="search-icon-container" type="submit">
{/*<i className="lnr lnr-magnifier search-icon"/>*/}
<span className="lnr lnr-magnifier font-size-lg"/>
</button>
</form>
</div>
{/*</div>*/}
</Nav>
</Col>
<Col md='3'>
<div className='float-right'>
<Row>
<UncontrolledButtonDropdown>
<DropdownToggle outline className="border-0 mr-2 font-size-lg"
color="none">
<span className="notificationIcon pe-7s-plus font-weight-bold"/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem
onClick={() => {
this.openAuction()
}}>New Auction</DropdownItem>
<DropdownItem
onClick={() => this.openArtwork()}>Create Artwork</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<WalletModal/>
</Row>
</div>
</Col>
</Collapse>
</Navbar>
</ReactCSSTransitionGroup>
</div>
</Fragment>
);
}
Example #24
| Source File: UiTabsAccordions.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Tabs & Accordions" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default Tabs</h4>
<p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p>
<Nav tabs>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "1"
})}
onClick={() => {
this.toggle("1");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "2"
})}
onClick={() => {
this.toggle("2");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "3"
})}
onClick={() => {
this.toggle("3");
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "4"
})}
onClick={() => {
this.toggle("4");
}}
>
Settings
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1" className="p-3">
<Row>
<Col sm="12">
<CardText>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby
sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="2" className="p-3">
<Row>
<Col sm="12">
<CardText>
Food truck fixie locavore, accusamus mcsweeney's
marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next
level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
Keytar helvetica VHS salvia yr, vero magna velit
sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="3" className="p-3">
<Row>
<Col sm="12">
<CardText>
Etsy mixtape wayfarers, ethical wes anderson tofu
before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger
bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie
helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog.
Scenester cred you probably haven't heard of them,
vinyl craft beer blog stumptown. Pitchfork
sustainable tofu synth chambray yr.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="4" className="p-3">
<Row>
<Col sm="12">
<CardText>
Trust fund seitan letterpress, keytar raw denim
keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby
sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin.
Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby
sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf
salvia freegan, sartorial keffiyeh echo park vegan.
</CardText>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Justify Tabs</h4>
<p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6"
})}
onClick={() => {
this.toggle1("6");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7"
})}
onClick={() => {
this.toggle1("7");
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8"
})}
onClick={() => {
this.toggle1("8");
}}
>
Settings
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby
sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
Food truck fixie locavore, accusamus mcsweeney's
marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next
level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
Keytar helvetica VHS salvia yr, vero magna velit
sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
Etsy mixtape wayfarers, ethical wes anderson tofu
before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger
bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie
helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog.
Scenester cred you probably haven't heard of them,
vinyl craft beer blog stumptown. Pitchfork
sustainable tofu synth chambray yr.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
Trust fund seitan letterpress, keytar raw denim
keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby
sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin.
Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby
sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf
salvia freegan, sartorial keffiyeh echo park vegan.
</CardText>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Vertical Nav Tabs</h4>
<p className="card-title-desc">
Example of Vertical nav tabs
</p>
<Row>
<Col md={3}>
<Nav pills className="flex-column" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<NavLink id="v-pills-home-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "1"
}, "mb-2")}
onClick={() => {
this.toggleCustom("1");
}} aria-controls="v-pills-home" aria-selected="true">
Home
</NavLink>
<NavLink id="v-pills-profile-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "2"
}, "mb-2")}
onClick={() => {
this.toggleCustom("2");
}} aria-controls="v-pills-home" aria-selected="true">
Profile
</NavLink>
<NavLink id="v-pills-messages-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "3"
}, "mb-2")}
onClick={() => {
this.toggleCustom("3");
}} aria-controls="v-pills-home" aria-selected="true">
Messages
</NavLink>
<NavLink id="v-pills-settings-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "4"
})}
onClick={() => {
this.toggleCustom("4");
}} aria-controls="v-pills-home" aria-selected="true">
Settings
</NavLink>
</Nav>
</Col>
<Col md={9}>
<TabContent activeTab={this.state.customActiveTab} className="text-muted mt-4 mt-md-0" id="v-pills-tabContent">
<TabPane tabId="1" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p>
Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan.
</p>
<p>Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
qui irure terry richardson ex squid.</p>
</TabPane>
<TabPane tabId="2" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>
Food truck fixie locavore, accusamus mcsweeney's marfa nulla
single-origin coffee squid. Exercitation +1 labore velit, blog
sartorial PBR leggings next level wes anderson artisan four loko
farm-to-table craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk.
</p>
<p className="mb-0"> Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna 8-bit</p>
</TabPane>
<TabPane tabId="3" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p>
Etsy mixtape wayfarers, ethical wes anderson tofu before they
sold out mcsweeney's organic lomo retro fanny pack lo-fi
farm-to-table readymade. Messenger bag gentrify pitchfork
tattooed craft beer, iphone skateboard locavore carles etsy
salvia banksy hoodie helvetica. DIY synth PBR banksy irony.
Leggings gentrify squid 8-bit cred.
</p>
<p className="mb-0">DIY synth PBR banksy irony.
Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh
mi whatever gluten-free.</p>
</TabPane>
<TabPane tabId="4" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p>
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
art party before they sold out master cleanse gluten-free squid
scenester freegan cosby sweater. Fanny pack portland seitan DIY,
art party locavore wolf cliche high life echo park Austin. Cred
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
farm-to-table.
</p>
<p className="mb-0">Fanny pack portland seitan DIY,
art party locavore wolf cliche high life echo park Austin. Cred
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
farm-to-table.
</p>
</TabPane>
</TabContent>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Custom Tabs</h4>
<p className="card-title-desc">
Example of custom tabs
</p>
<Nav tabs className="nav-tabs-custom nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "5"
})}
onClick={() => {
this.toggleCustomJustified("5");
}}
>
<span className="d-none d-sm-block">Home</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "6"
})}
onClick={() => {
this.toggleCustomJustified("6");
}}
>
<span className="d-none d-sm-block">Profile</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "7"
})}
onClick={() => {
this.toggleCustomJustified("7");
}}
>
<span className="d-none d-sm-block">Messages</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "8"
})}
onClick={() => {
this.toggleCustomJustified("8");
}}
>
<span className="d-none d-sm-block">Settings</span>
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTabJustify}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby
sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
Food truck fixie locavore, accusamus mcsweeney's
marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next
level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
Keytar helvetica VHS salvia yr, vero magna velit
sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
Etsy mixtape wayfarers, ethical wes anderson tofu
before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger
bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie
helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog.
Scenester cred you probably haven't heard of them,
vinyl craft beer blog stumptown. Pitchfork
sustainable tofu synth chambray yr.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
Trust fund seitan letterpress, keytar raw denim
keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby
sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin.
Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby
sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf
salvia freegan, sartorial keffiyeh echo park vegan.
</CardText>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default Collapse</h4>
<p className="card-title-desc">
You can use a link with the{" "} <code className="highlighter-rouge">href</code> attribute, or a button with the{" "} <code className="highlighter-rouge">data-target</code> attribute. In both cases, the{" "} <code className="highlighter-rouge"> data-toggle="collapse"</code> is required.
</p>
<p>
<Link
to="#"
onClick={this.t_col5}
style={{ cursor: "pointer" }}
className="btn btn-primary mo-mb-2"
>
Link with href </Link>{" "}
<button
onClick={this.t_col5}
className="btn btn-primary mo-mb-2"
type="button"
style={{ cursor: "pointer" }}
>
Button with data-target
</button>
</p>
<Collapse isOpen={this.state.col5}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<div id="accordion">
<Card className="mb-1">
<Link to="#" onClick={this.t_col1} style={{ cursor: "pointer" }} className="text-dark" >
<CardHeader id="headingOne">
<h6 className="m-0 font-14">
Collapsible Group Item #1
<i className={this.state.col1 ? "mdi mdi-minus float-right accor-plus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</h6>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col1}>
<CardBody>
Anim pariatur cliche reprehenderit, enim eiusmod
high life accusamus terry richardson ad squid. 3
wolf moon officia aute, non cupidatat skateboard
dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore
sustainable VHS.
</CardBody>
</Collapse>
</Card>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #25
| Source File: Cards.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card title
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
<CardFooter>Card footer</CardFooter>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with icon
<div className="card-header-actions">
<i className="fa fa-check float-right"></i>
</div>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with switch
<div className="card-header-actions">
<AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
</div>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with label
<div className="card-header-actions">
<Badge color="success" className="float-right">Success</Badge>
</div>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardHeader>
Card with label
<div className="card-header-actions">
<Badge pill color="danger" className="float-right">42</Badge>
</div>
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="border-primary">
<CardHeader>
Card outline primary
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-secondary">
<CardHeader>
Card outline secondary
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-success">
<CardHeader>
Card outline success
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-info">
<CardHeader>
Card outline info
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-warning">
<CardHeader>
Card outline warning
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="border-danger">
<CardHeader>
Card outline danger
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-primary">
<CardHeader>
Card with accent
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-secondary">
<CardHeader>
Card with accent
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-success">
<CardHeader>
Card with accent
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-info">
<CardHeader>
Card with accent
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-warning">
<CardHeader>
Card with accent
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="card-accent-danger">
<CardHeader>
Card with accent
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary text-center">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-success text-center">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-info text-center">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-warning text-center">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-danger text-center">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary text-center">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary">
<CardHeader>
Card title
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-success">
<CardHeader>
Card title
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-info">
<CardHeader>
Card title
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-warning">
<CardHeader>
Card title
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-danger">
<CardHeader>
Card title
</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<Card>
<CardHeader>
Card actions
<div className="card-header-actions">
{/*eslint-disable-next-line*/}
<a href="#" className="card-header-action btn btn-setting"><i className="icon-settings"></i></a>
{/*eslint-disable-next-line*/}
<a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a>
{/*eslint-disable-next-line*/}
<a className="card-header-action btn btn-close" onClick={this.toggleFade}><i className="icon-close"></i></a>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
</div>
);
}
Example #26
| Source File: Collapses.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
<CardBody>
<p>
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</p>
<p>
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
vehicula sagittis elit leo id nisi.
</p>
</CardBody>
</Collapse>
<CardFooter>
<Button color="primary" onClick={this.toggle} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
<hr/>
<h5>Current state: {this.state.status}</h5>
</CardFooter>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Fade</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
This content will fade in and out as the button is pressed...
</Fade>
</CardBody>
<CardFooter>
<Button color="primary" onClick={this.toggleFade} id="toggleFade1">Toggle Fade</Button>
</CardFooter>
</Card>
</Col>
<Col xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
<div className="card-header-actions">
<Badge>NEW</Badge>
</div>
</CardHeader>
<CardBody>
<div id="accordion">
<Card className="mb-0">
<CardHeader id="headingOne">
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
</Button>
</CardHeader>
<Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
<CardBody>
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</CardBody>
</Collapse>
</Card>
<Card className="mb-0">
<CardHeader id="headingTwo">
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
</Button>
</CardHeader>
<Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
<CardBody>
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</CardBody>
</Collapse>
</Card>
<Card className="mb-0">
<CardHeader id="headingThree">
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
</Button>
</CardHeader>
<Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
<CardBody>
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</CardBody>
</Collapse>
</Card>
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
<div className="card-header-actions">
<Badge>NEW</Badge>
</div>
</CardHeader>
<CardBody>
<div id="exampleAccordion" data-children=".item">
<div className="item">
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(0)} aria-expanded={this.state.custom[0]} aria-controls="exampleAccordion1">
Toggle item
</Button>
<Collapse isOpen={this.state.custom[0]} data-parent="#exampleAccordion" id="exampleAccordion1">
<p className="mb-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget
tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
</p>
</Collapse>
</div>
<div className="item">
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(1)} aria-expanded={this.state.custom[1]} aria-controls="exampleAccordion2">
Toggle item 2
</Button>
<Collapse isOpen={this.state.custom[1]} data-parent="#exampleAccordion" id="exampleAccordion2">
<p className="mb-3">
Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</p>
</Collapse>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #27
| Source File: Forms.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Credit Card</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccmonth">Month</Label>
<Input type="select" name="ccmonth" id="ccmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccyear">Year</Label>
<Input type="select" name="ccyear" id="ccyear">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required />
</FormGroup>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Company</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup>
<FormGroup>
<Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup>
<FormGroup>
<Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name" />
</FormGroup>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city" />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name" />
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Basic Form</strong> Elements
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label>Static</Label>
</Col>
<Col xs="12" md="9">
<p className="form-control-static">Username</p>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="text-input">Text Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="email-input">Email Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="password-input">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
<FormText className="help-block">Please enter a complex password</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
</Col>
<Col xs="12" md="9">
<Input type="date" id="date-input" name="date-input" placeholder="date" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabled-input">Disabled Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="textarea-input">Textarea</Label>
</Col>
<Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..." />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="select">Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="select" id="select">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectLg">Select Large</Label>
</Col>
<Col xs="12" md="9" size="lg">
<Input type="select" name="selectLg" id="selectLg" bsSize="lg">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectSm">Select Small</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabledSelect">Disabled Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="disabledSelect" id="disabledSelect" disabled autoComplete="name">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="multiple-select">Multiple select</Label>
</Col>
<Col md="9">
<Input type="select" name="multiple-select" id="multiple-select" multiple>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
<option value="8">Option #8</option>
<option value="9">Option #9</option>
<option value="10">Option #10</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Radios</Label>
</Col>
<Col md="9">
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Radios</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9">
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Checkboxes</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-input">File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col>
</FormGroup>
<FormGroup row hidden>
<Col md="3">
<Label className="custom-file" htmlFor="custom-file-input">Custom file input</Label>
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span>
</Label>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Inline</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" inline>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="[email protected]" required />
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Horizontal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-email">Email</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-password">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Normal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</FormGroup>
<FormGroup>
<Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Grid</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
<Input type="text" placeholder=".col-sm-3" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="4">
<Input type="text" placeholder=".col-sm-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="5">
<Input type="text" placeholder=".col-sm-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="6">
<Input type="text" placeholder=".col-sm-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="7">
<Input type="text" placeholder=".col-sm-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="8">
<Input type="text" placeholder=".col-sm-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="9">
<Input type="text" placeholder=".col-sm-9" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="10">
<Input type="text" placeholder=".col-sm-10" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="11">
<Input type="text" placeholder=".col-sm-11" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="12">
<Input type="text" placeholder=".col-sm-12" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Sizes</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" valid id="inputIsValid" />
<FormFeedback valid>Cool! Input is valid</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" invalid id="inputIsInvalid" />
<FormFeedback>Houston, we have a problem...</FormFeedback>
</FormGroup>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i" />
<FormFeedback valid>Non-required</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
<FormFeedback valid className="help-block">Input provided</FormFeedback>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Icon/Text</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-euro"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Button</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Dropdowns</strong> Groups
</CardHeader>
<CardBody>
<Form className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown addonType="prepend"
isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown
addonType="prepend"
isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
Use the grid for big devices!
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Input Grid for small devices!
<small><code>.col-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="7">
<Input type="text" placeholder=".col-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="7">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="email" id="username3" name="username3" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="primary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="secondary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username1" name="username1" placeholder="Username" autoComplete="name"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="success">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12">
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<Card>
<CardHeader>
<i className="fa fa-edit"></i>Form Elements
<div className="card-header-actions">
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text" />
</InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
</div>
);
}
Example #28
| Source File: Sidebar.js From covidsos with MIT License | 4 votes |
|
render() {
const {logo} = this.props;
let navbarBrandProps;
if (logo && logo.innerLink) {
navbarBrandProps = {
to: logo.innerLink,
tag: Link
};
} else if (logo && logo.outterLink) {
navbarBrandProps = {
href: logo.outterLink,
target: "_blank"
};
}
const isAuthorisedUser = isAuthorisedUserLoggedIn();
return (
<Navbar
className="navbar-vertical fixed-left navbar-light bg-custom-navbar"
expand="md"
id="sidenav-main"
>
<Container fluid>
{/* Toggler */}
<button
className="navbar-toggler"
type="button"
onClick={this.toggleCollapse}
>
<span className="fas fa-bars text-white"/>
</button>
{/* Brand */}
{logo ? (
<NavbarBrand className="pt-0 ml-3" {...navbarBrandProps}>
<img
alt={logo.imgAlt}
className="navbar-brand-img"
src={logo.imgSrc}
/>
</NavbarBrand>
) : null}
<Row> {/* className="d-inline-flex" */}
<Col className="mr-3">
<Nav className="align-items-center d-md-none" navbar>
<Media className="align-items-center">
{/*<NavItem className="no-list-style mr--5">*/}
<NavLink href="/how-it-works" title="How it works?" className="px-0">
<span className="avatar avatar-sm bg-red">
<i className="fas fa-info text-white text-lg rounded-circle"/>
</span>
</NavLink>
</Media>{/* User */}
</Nav>
</Col>
<Col>
<UserDropDown className="align-items-center d-md-none"/>
</Col>
</Row>
{/* Collapse */}
<Collapse navbar isOpen={this.state.collapseOpen}>
{/* Collapse header */}
<div className="navbar-collapse-header d-md-none">
<Row>
{logo ? (
<Col className="collapse-brand" xs="6">
{logo.innerLink ? (
<Link to={logo.innerLink}>
<img alt={logo.imgAlt} src={logo.imgSrc}/>
</Link>
) : (
<a href={logo.outterLink}>
<img alt={logo.imgAlt} src={logo.imgSrc}/>
</a>
)}
</Col>
) : null}
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
type="button"
onClick={this.toggleCollapse}
>
<span/>
<span/>
</button>
</Col>
</Row>
</div>
{/* Navigation */}
<Nav navbar>
{this.getNavLink('tables', 'text-indigo')}
{isAuthorisedUser && this.getCustomNavLink('newRequests', 'New Requests',
'/requests/new', 'fas fa-clipboard text-orange')}
{this.getNavLink('pendingRequests', 'text-yellow')}
{isAuthorisedUser && this.getCustomNavLink('inProgressRequests', 'In Progress Requests',
'/requests/in-progress', 'fas fa-clipboard-list')}
{this.getCustomNavLink('completedRequests', 'Completed Requests',
'/requests/completed', 'fas fa-clipboard-check text-green')}
{this.getNavLink('viewOnMap', 'text-red')}
{this.getNavLink('about', 'text-blue')}
{this.getNavLink('ourPartners', 'text-green')}
{this.getNavLink('usefulLinks', 'text-teal')}
{this.getNavLink('contactUs', 'text-green')}
</Nav>
{/* Divider */}
<hr className="my-3"/>
<div className="mb-0 mt-auto">
<p className="font-italic">Only a life lived for others is a life worthwhile</p>
<p className="font-italic float-md-right">- Albert Einstein</p>
</div>
</Collapse>
</Container>
</Navbar>
);
}
Example #29
| Source File: HeaderView.js From study-chain with MIT License | 4 votes |
|
render() {
const { mode, classes } = this.props;
const { hostname, port } = window.location;
const webSocketProtocol =
window.location.protocol === 'https:' ? 'wss' : 'ws';
const webSocketUrl = `${webSocketProtocol}://${hostname}:${port}/`;
const dark = mode === 'dark';
const {
isLoading,
selectedChannel,
channels,
notifyCount,
notifyDrawer,
adminDrawer,
modalOpen,
notifications
} = this.state;
const links = [
{ to: '/', label: 'DASHBOARD', exact: true },
{ to: '/network', label: 'NETWORK' },
{ to: '/blocks', label: 'BLOCKS' },
{ to: '/transactions', label: 'TRANSACTIONS' },
{ to: '/chaincodes', label: 'CHAINCODES' },
{ to: '/channels', label: 'CHANNELS' }
];
return (
<div>
{/* production */}
{/* development */}
<Websocket
url={webSocketUrl}
onMessage={this.handleData.bind(this)}
reconnect
/>
<Router>
<div>
<Navbar className={classes.navbarHeader} expand="lg" fixed="top">
<NavbarBrand href="/">
{' '}
<img
src={Logo}
className={classes.logo}
alt="Hyperledger Logo"
/>
</NavbarBrand>
<NavbarToggler onClick={this.toggle}>
<FontAwesome name="bars" className={classes.toggleIcon} />
</NavbarToggler>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav
className="ml-auto navbar-left"
navbar
onMouseLeave={this.closeToggle}
>
{links.map(({ to, label, ...props }) => (
<li key={to}>
<NavLink
to={to}
className={classes.tab}
activeClassName={classes.activeTab}
onClick={this.toggle}
{...props}
>
{label}
</NavLink>
</li>
))}
<div className={classes.adminButton}>
<Select
className={classes.channel}
placeholder="Select Channel..."
required
name="form-field-name"
isLoading={isLoading}
value={selectedChannel}
onChange={this.handleChange}
onFocus={this.reloadChannels.bind(this)}
options={channels}
/>
</div>
{
<div className={classes.adminButton}>
<FontAwesome
name="bell"
data-command="bell"
className={classes.bell}
onClick={() => this.handleDrawOpen('notifyDrawer')}
/>
<Badge badgeContent={notifyCount} color="primary" />
</div>
}
{/*
//Use when Admin functionality is required
<div className={classes.adminButton}>
<FontAwesome
name='cog'
className='cog'
onClick={() => this.handleDrawOpen('adminDrawer')}
/>
</div> */}
<div
className={`${classes.adminButton} ${classes.themeSwitch}`}
>
<FontAwesome name="sun-o" className={classes.sunIcon} />
<Switch
onChange={() => this.handleThemeChange(mode)}
checked={dark}
/>
<FontAwesome name="moon-o" className={classes.moonIcon} />
</div>
</Nav>
</Collapse>
</Navbar>
<Drawer
anchor="right"
open={notifyDrawer}
onClose={() => this.handleDrawClose('notifyDrawer')}
>
<div tabIndex={0} role="button">
<NotificationsPanel notifications={notifications} />
</div>
</Drawer>
<Drawer
anchor="right"
open={adminDrawer}
onClose={() => this.handleDrawClose('adminDrawer')}
>
<div tabIndex={0} role="button">
<AdminPanel />
</div>
</Drawer>
<Dialog
open={modalOpen}
onClose={this.handleClose}
fullWidth={false}
maxWidth="md"
>
<div className={classes.channelLoader}>
<h4>Loading Channel Details</h4>
<Loader
type="ThreeDots"
color="#005069"
height={70}
width={70}
className={classes.loader}
/>
</div>
</Dialog>
</div>
</Router>
</div>
);
}
