reactstrap#ButtonDropdown JavaScript Examples
The following examples show how to use
reactstrap#ButtonDropdown.
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: UserConfig.jsx From watchmo with MIT License | 6 votes |
|
UserConfig = () => {
// setting the state for the drop down button with typescript
const [dropdownCatOpen, setCatOpen] = React.useState;
// function that is in charge of changing the state
const toggleCat = () => {
setCatOpen(!dropdownCatOpen);
};
// request file from backend and loop through categories to create category selectors
// replace this arrayOfCategories with logic that parses the response object into specific cats
const arrayOfCategories = ['Cat 1', 'Cat 2', 'Cat 3'];
const categories = [];
for (let i = 0; i < arrayOfCategories.length; i += 1) {
categories.push(<DropdownItem key={i}> {arrayOfCategories[i]} </DropdownItem>);
}
return (
<div id="UserConfig">
<h1> User Config </h1>
<button type="button" className="userDashboard">
Back to User Dashboard
</button>
<div className="configCategoriesDrop">
<ButtonDropdown isOpen={dropdownCatOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Categories:
</DropdownToggle>
<DropdownMenu>{categories}</DropdownMenu>
</ButtonDropdown>
</div>
<div>
<ConfigDashboard />
</div>
</div>
);
}
Example #2
| 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 #3
| Source File: index.js From hackchat-client with Do What The F*ck You Want To Public License | 5 votes |
|
function ChannelItem({
channel,
onCloseChannelsModal,
onEnableCaptcha,
onDisableCaptcha,
onLockChannel,
onUnlockChannel,
history,
intl,
}) {
const [dropdownOpen, setOpen] = useStateIfMounted(false);
const toggle = () => setOpen(!dropdownOpen);
const leaveChannelLabel = intl.formatMessage(messages.leaveChannelLabel);
const copyInviteLabel = intl.formatMessage(messages.copyInviteLabel);
const takeOwnershipLabel = intl.formatMessage(messages.takeOwnershipLabel);
const enableCaptchaLabel = intl.formatMessage(messages.enableCaptchaLabel);
const disableCaptchaLabel = intl.formatMessage(messages.disableCaptchaLabel);
const lockChannelLabel = intl.formatMessage(messages.lockChannelLabel);
const unlockChannelLabel = intl.formatMessage(messages.unlockChannelLabel);
return (
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle} key={`${channel}Btn`}>
<ChannelButton
id="caret"
onClick={() => {
onCloseChannelsModal();
history.push(`/?${channel}`);
}}
>
{channel}
</ChannelButton>
<SmallDropdownToggle caret />
<DropdownMenu>
<DropdownItem>
<LeaveChannelLabel>{leaveChannelLabel}</LeaveChannelLabel>
</DropdownItem>
<DropdownItem disabled>{copyInviteLabel}</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>{takeOwnershipLabel}</DropdownItem>
<DropdownItem
onClick={() => {
onCloseChannelsModal();
onEnableCaptcha(channel);
}}
>
{enableCaptchaLabel}
</DropdownItem>
<DropdownItem
onClick={() => {
onCloseChannelsModal();
onDisableCaptcha(channel);
}}
>
{disableCaptchaLabel}
</DropdownItem>
<DropdownItem
onClick={() => {
onCloseChannelsModal();
onLockChannel(channel);
}}
>
{lockChannelLabel}
</DropdownItem>
<DropdownItem
onClick={() => {
onCloseChannelsModal();
onUnlockChannel(channel);
}}
>
{unlockChannelLabel}
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
);
}
Example #4
| Source File: ProjectSelect.jsx From watchmo with MIT License | 5 votes |
|
function ProjectSelect() {
// setting the state for the drop down button with typescript
const [dropdownProjOpen, setProjOpen] = useState(false);
const { project, updateProject } = useContext(ProjectContext);
// these are used to grab data from watchmo and loaded it into the state
const [projsFromServer, setProjsFromServer] = useState([1, 2]);
const [projGained, setDataGained] = useState(false);
// function that is in charge of changing the state
const toggleCat = () => {
setProjOpen(!dropdownProjOpen);
};
useEffect(() => {
if (!projGained) {
fetch('/projectNames.json')
.then(data => data.json())
.then(parsed => {
setProjsFromServer(parsed);
});
setDataGained(true);
}
}, [projsFromServer]);
const projcategoriesInDropDown = [];
for (const projects of projsFromServer) {
projcategoriesInDropDown.push(
<DropdownItem key={projects} onClick={() => updateProject({ projects })}>
{projects}
</DropdownItem>
);
}
return (
<div id="projectSelect">
<div className="projDrop">
<ButtonDropdown isOpen={dropdownProjOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Projects:
</DropdownToggle>
<DropdownMenu>{projcategoriesInDropDown}</DropdownMenu>
</ButtonDropdown>
</div>
{project.projects && (
<div>
<div id="userDashBtn">
<Link to="/userDashBoard">
<Button size="md" type="button" className="btnSecondary">
DASHBOARD
</Button>
</Link>
</div>
<div id="configBtn">
<Link to="/configDash">
<Button type="button" className="btnSecondary">
CONFIG
</Button>
</Link>
</div>
</div>
)}
</div>
);
}
Example #5
| Source File: UserDashboard.jsx From watchmo with MIT License | 5 votes |
|
function UserDashboard(props) {
const [dropdownCatOpen, setCatOpen] = useState(false);
// these are used to grab data from watchmo and loaded it into the state
const [dataFromServer, setDataFromServer] = useState([]);
const [dataGained, setDataGained] = useState(false);
// eslint-disable-next-line no-unused-vars
const { project, updateProject } = useContext(ProjectContext);
if (!project.projects) {
props.history.push('/');
}
// this is to hold the current category to be displayed int he bar graph
const [currentCat, setCurrentCat] = useState('');
useEffect(() => {
if (!dataGained) {
fetch(`${project.projects}/parsedData.json`)
.then(data => data.json())
.then(parsed => {
setDataFromServer(parsed);
})
.catch(err => console.log(err));
setDataGained(true);
}
}, [project]);
// function that is in charge of changing the state
const toggleCat = () => {
setCatOpen(!dropdownCatOpen);
};
// dropdown menu items construction with categories from the data (the first layer of keys in the object)
const categoriesInDropDown = [];
for (const category in dataFromServer) {
categoriesInDropDown.push(
<DropdownItem key={category} onClick={() => setCurrentCat(category)}>
{category}
</DropdownItem>
);
}
return (
<div id="UserDashboard">
<Container>
<Row xs="1">
<Col xs="6">
<Link id="navProjLink" to="/">
<Button color="secondary" id="navProjSelect" block>
Project Select
</Button>
</Link>
</Col>
<Col xs="6">
<Link id="navConfigLink" to="/configDash">
<Button id="navConfigDash" color="secondary" block>
Config Dashboard
</Button>
</Link>
</Col>
</Row>
</Container>
<h1> User Dashboard </h1>
<div className="categoriesDrop">
<ButtonDropdown isOpen={dropdownCatOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Categories:
</DropdownToggle>
<DropdownMenu>{categoriesInDropDown}</DropdownMenu>
</ButtonDropdown>
</div>
<div id="chartArea">
<VertColViz dataCat={dataFromServer[currentCat]} />
</div>
</div>
);
}
Example #6
| Source File: index.js From strapi-plugins with MIT License | 5 votes |
|
Logout = ({ history: { push } }) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(prev => !prev);
// -- add this role variable --
const role = get(auth.getUserInfo(), 'role') || 'admin';
// -- --- --
const handleGoTo = () => {
const id = get(auth.getUserInfo(), 'id');
push({
pathname: `/plugins/content-manager/collectionType/strapi::administrator/${id}`,
search: '?redirectUrl=/plugins/content-manager/collectionType/strapi::administrator',
});
};
const handleGoToAdministrator = () => {
push({
pathname: '/plugins/content-manager/collectionType/strapi::administrator',
});
};
const handleLogout = () => {
auth.clearAppStorage();
// -- send reload notice for login page using 'location.state'
// -- so we refresh to re-fetch content-types for a new user role
push('/auth/login', { reload: true });
// -- --- --
};
return (
<Wrapper>
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle>
{get(auth.getUserInfo(), 'username')}
<FontAwesomeIcon icon="caret-down" />
</DropdownToggle>
<DropdownMenu className="dropDownContent">
{/* -- add this condition -- */}
{role === 'admin' && (
<>
<DropdownItem onClick={handleGoTo} className="item">
<FormattedMessage id="app.components.Logout.profile" />
</DropdownItem>
<DropdownItem onClick={handleGoToAdministrator} className="item">
<FormattedMessage id="app.components.Logout.admin" />
</DropdownItem>
</>
)}
{/* -- --- -- */}
<DropdownItem onClick={handleLogout}>
<FormattedMessage id="app.components.Logout.logout" />
<FontAwesomeIcon icon="sign-out-alt" />
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</Wrapper>
);
}
Example #7
| Source File: Tables.js From sofia-react-template with MIT License | 4 votes |
|
Tables = function () {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [firstTable] = useState(mock.firstTable);
const [secondTable] = useState(mock.secondTable);
const [transactions, setTransactions] = useState(mock.transactionsWidget);
const [tasks, setTasks] = useState(mock.tasksWidget);
const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
const [tableDropdownOpen, setTableMenuOpen] = useState(false);
const pageSize = 4;
const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);
const setFirstTablePage = (e, index) => {
e.preventDefault();
setFirstTableCurrentPage(index);
}
const setSecondTablePage = (e, index) => {
e.preventDefault();
setSecondTableCurrentPage(index);
}
const toggle = () => {
setDropdownOpen(!dropdownOpen);
}
const transactionMenuOpen = (id) => {
setTransactions(
transactions.map( transaction => {
if (transaction.id === id) {
transaction.dropdownOpen = !transaction.dropdownOpen;
}
return transaction;
})
)
}
const tableMenuOpen = () => {
setTableMenuOpen(!tableDropdownOpen);
}
const toggleTask = (id) => {
setTasks(
tasks.map( task => {
if (task.id === id) {
task.completed = !task.completed;
}
return task;
})
)
}
return (
<div>
<Row>
<Col>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">States Colors</div>
<div className="d-flex">
<a href="/#"><img src={searchIcon} alt="Search"/></a>
<a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
<a href="/#"><img src={printerIcon} alt="Printer" /></a>
<a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
<a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
</div>
</div>
<div className="widget-table-overflow">
<Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
<thead>
<tr>
<th className={s.checkboxCol}>
<div className="checkbox checkbox-primary">
<input
className="styled"
id="checkbox100"
type="checkbox"
/>
<label for="checkbox100"/>
</div>
</th>
<th className="w-25">NAME</th>
<th className="w-25">COMPANY</th>
<th className="w-25">CITY</th>
<th className="w-25">STATE</th>
</tr>
</thead>
<tbody>
{firstTable
.slice(
firstTableCurrentPage * pageSize,
(firstTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<Label for={item.id} />
</div>
</td>
<td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
<td>{item.company}</td>
<td>{item.city}</td>
<td>{item.state}</td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-borderless" aria-label="Page navigation example">
<PaginationItem disabled={firstTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(firstTablePagesCount)].map((page, i) =>
<PaginationItem active={i === firstTableCurrentPage} key={i}>
<PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Material UI table</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={tableDropdownOpen}
toggle={() => tableMenuOpen()}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="widget-table-overflow">
<Table className="table-striped table-borderless table-hover" responsive>
<thead>
<tr>
<th>
<div className="checkbox checkbox-primary">
<input
id="checkbox200"
className="styled"
type="checkbox"
/>
<label for="checkbox200"/>
</div>
</th>
<th className={s.nameCol}>NAME</th>
<th>EMAIL</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>DATE</th>
<th>CITY</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
{secondTable
.slice(
secondTableCurrentPage * pageSize,
(secondTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<label for={item.id} />
</div>
</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.product}</td>
<td>{item.price}</td>
<td>{item.date}</td>
<td>{item.city}</td>
<td><Badge color={item.color}>{item.status}</Badge></td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-with-border">
<PaginationItem disabled={secondTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(secondTablePagesCount)].map((page, i) =>
<PaginationItem active={i === secondTableCurrentPage} key={i}>
<PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} xl={8} className="pr-grid-col">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Recent transaction</div>
<div>
<ButtonDropdown
isOpen={dropdownOpen}
toggle={toggle}
className=""
>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
{/*<img src="" alt="Filter option"/>*/}
</div>
</div>
<div className={s.widgetContentBlock}>
{transactions.map(item => (
<div key={uuidv4()} className={s.content}>
<div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
<div className="body-3 muted d-none d-md-block">{item.date}</div>
<div className="body-2">{item.price}</div>
<div className="body-3 muted d-none d-lg-block">{item.description}</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={item.dropdownOpen}
toggle={() => transactionMenuOpen(item.id)}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
))}
</div>
</Widget>
</Col>
<Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Tasks</div>
</div>
<div className={s.widgetContentBlock}>
<TaskContainer tasks={tasks} toggleTask={toggleTask} />
</div>
</Widget>
</Col>
</Row>
</Col>
</Row>
</div>
)
}
Example #8
| Source File: UiButtons.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Buttons" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default buttons</h4>
<p className="card-title-desc">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div className="button-items">
<Button
color="primary"
className=" waves-effect waves-light mr-1"
>
Primary
</Button>
<Button
color="light"
className="waves-effect mr-1"
>
Light
</Button>
<Button
color="success"
className="waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
className="waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
className=" waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
className="waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
className="waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="link" className="waves-effect mr-1">
Link
</Button>
<Button
color="secondary"
className="waves-effect"
>
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Outline buttons</h4>
<p className="card-title-desc">Add one another property like <code className="highlighter-rouge">outline</code> ones to remove all background images and colors on any button.</p>
<div className="button-items">
<Button
color="primary"
outline
className="waves-effect waves-light mr-1"
>
Primary
</Button>
<Button color="light" outline className="waves-effect mr-1">
Light
</Button>
<Button
color="success"
outline
className="waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
outline
className="waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
outline
className="waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
outline
className="waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
outline
className="waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="secondary" outline className="waves-effect">
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Rounded buttons</h4>
<p className="card-title-desc">Use class <code>.btn-rounded</code> for button round border.</p>
<div className="button-items">
<Button
color="primary"
className="btn-rounded waves-effect waves-light mr-1"
>
Primary
</Button>
<Button
color="light"
className="btn-rounded waves-effect mr-1"
>
Light
</Button>
<Button
color="success"
className="btn-rounded waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
className="btn-rounded waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
className="btn-rounded waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
className="btn-rounded waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
className="btn-rounded waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="link" className="waves-effect mr-1">
Link
</Button>
<Button
color="secondary"
className="btn-rounded waves-effect"
>
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons with icon</h4>
<p className="card-title-desc">Add icon in button.</p>
<div className="button-items">
<Button color="primary" type="button" className="waves-effect waves-light mr-1">
Primary <i className="ri-arrow-right-line align-middle ml-2"></i>
</Button>
<Button color="success" type="button" className="waves-effect waves-light mr-1">
<i className="ri-check-line align-middle mr-2"></i> Success
</Button>
<Button color="warning" type="button" className="waves-effect waves-light mr-1">
<i className="ri-error-warning-line align-middle mr-2"></i> Warning
</Button>
<Button color="danger" type="button" className="waves-effect waves-light mr-1">
<i className="ri-close-line align-middle mr-2"></i> Danger
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons Sizes</h4>
<p className="card-title-desc">Add Property size=""<code>lg</code> or <code>sm</code> for additional sizes.</p>
<div className="button-items">
<Button
color="primary"
size="lg"
className="waves-effect waves-light mr-1"
>
Large button
</Button>
<Button
color="light"
size="lg"
className="waves-effect mr-1"
>
Large button
</Button>
<Button
color="primary"
size="sm"
className="waves-effect waves-light mr-1"
>
Small button
</Button>
<Button
color="light"
size="sm"
className="waves-effect"
>
Small button
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons width</h4>
<p className="card-title-desc">Add <code>.w-xs</code>, <code>.w-sm</code>, <code>.w-md</code> and <code> .w-lg</code> className for additional buttons width.</p>
<div className="button-items">
<Button type="button" color="primary" className="w-xs waves-effect waves-light mr-1">Xs</Button>
<Button type="button" color="danger" className="w-sm waves-effect waves-light mr-1">Small</Button>
<Button type="button" color="warning" className="w-md waves-effect waves-light mr-1">Medium</Button>
<Button type="button" color="success" className="w-lg waves-effect waves-light">Large</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button tags</h4>
<p className="card-title-desc">The <code className="highlighter-rouge">.btn</code>
classes are designed to be used with the <code
className="highlighter-rouge"><button></code> element.
However, you can also use these classes on <code
className="highlighter-rouge"><Link></code> or <code
className="highlighter-rouge"><input></code> elements (though
some browsers may apply a slightly different rendering).</p>
<div className="button-items">
<Link
className="btn btn-primary waves-effect waves-light"
to="#"
role="button"
>
Link
</Link>
<Button
color="success"
className="waves-effect waves-light mr-1"
type="submit"
>
Button
</Button>
<input
className="btn btn-info mr-1"
type="button"
value="Input"
/>
<input
className="btn btn-danger mr-1"
type="submit"
value="Submit"
/>
<input
className="btn btn-warning mr-1"
type="reset"
value="Reset"
/>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Toggle states</h4>
<p className="card-title-desc">Add <code className="highlighter-rouge">data-toggle="button"</code>
to toggle a button’s <code className="highlighter-rouge">active</code>
state. If you’re pre-toggling a button, you must manually add the <code
className="highlighter-rouge">.active</code> class
<strong>and</strong> <code
className="highlighter-rouge">aria-pressed="true"</code> to the
<code className="highlighter-rouge"><button></code>.
</p>
<div className="button-items">
<ButtonToggle
color="primary"
className="btn btn-primary waves-effect waves-light"
>
Single toggle
</ButtonToggle>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Block Buttons</h4>
<p className="card-title-desc">Create block level buttons—those that span the full width of a parent—by adding property <code
className="highlighter-rouge">block</code>.</p>
<div className="button-items">
<Button
color="primary"
size="lg"
block
className="waves-effect waves-light"
>
Block level button
</Button>
<Button
color="light"
size="sm"
block
className="waves-effect"
>
Block level button
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Checkbox & Radio Buttons</h4>
<p className="card-title-desc">Bootstrap’s <code
className="highlighter-rouge">.button</code> styles can be applied to
other elements, such as <code className="highlighter-rouge">
<label></code>s, to provide checkbox or radio style button
toggling. Add <code
className="highlighter-rouge">data-toggle="buttons"</code> to a
<code className="highlighter-rouge">.btn-group</code> containing those
modified buttons to enable toggling in their respective styles.</p>
<Row>
<Col xl={6}>
<div
className="btn-group btn-group-toggle"
data-toggle="buttons"
>
<Label
className=
{
this.state.check1
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox" defaultChecked
onClick={() =>
this.setState({
check1: !this.state.check1,
})
}
/> Checked-1
</Label>
<Label
className=
{
this.state.check2
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox"
onClick={() =>
this.setState({
check2: !this.state.check2,
})
}
/> Checked-2
</Label>
<Label
className=
{
this.state.check3
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox"
onClick={() =>
this.setState({
check3: !this.state.check3
})
}
/> Checked-3
</Label>
</div>
</Col>
<Col xl={6}>
<div
className="btn-group btn-group-toggle"
data-toggle="buttons"
>
<Label
className=
{
this.state.radio1
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1" defaultChecked
onClick={() =>
this.setState({
radio1: true,
radio2: false,
radio3: false
})
}
/> Active
</Label>
<Label
className=
{
this.state.radio2
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1"
onClick={() =>
this.setState({
radio1: false,
radio2: true,
radio3: false
})
}
/> Radio
</Label>
<Label
className=
{
this.state.radio3
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1"
onClick={() =>
this.setState({
radio1: false,
radio2: false,
radio3: true
})
}
/> Radio
</Label>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button group</h4>
<p className="card-title-desc">Wrap a series of buttons with <code
className="highlighter-rouge">.btn</code> in <code
className="highlighter-rouge">.btn-group</code>.</p>
<Row>
<Col md={6}>
<ButtonGroup>
<Button color="primary" >
Left
</Button>
<Button color="primary" >
Middle
</Button>
<Button color="primary">
Right
</Button>
</ButtonGroup>
</Col>
<Col md={6}>
<div className="btn-group mt-4 mt-md-0" role="group" aria-label="Basic example">
<Button type="button" color="light"><i className="ri-menu-2-line"></i></Button>
<Button type="button" color="light"><i className="ri-menu-5-line"></i></Button>
<Button type="button" color="light"><i className="ri-menu-3-line"></i></Button>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button toolbar</h4>
<p className="card-title-desc">Combine sets of button groups into
button toolbars for more complex components. Use utility classNamees as
needed to space out groups, buttons, and more.</p>
<ButtonToolbar >
<ButtonGroup>
<Button color="light">
1
</Button>
<Button color="light">
2
</Button>
<Button color="light">
3
</Button>
<Button color="light">
4
</Button>
</ButtonGroup>
<ButtonGroup className="ml-2">
<Button color="light">
5
</Button>
<Button color="light">
6
</Button>
<Button color="light" >
7
</Button>
</ButtonGroup>
<ButtonGroup className="ml-2">
<Button color="light" >
8
</Button>
</ButtonGroup>
</ButtonToolbar >
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Sizing</h4>
<p className="card-title-desc">Instead of applying button sizing
classes to every button in a group, just add property size=""<code
className="highlighter-rouge">.btn-group-*</code> to each <code
className="highlighter-rouge">.btn-group</code>, including each one
when nesting multiple groups.</p>
<ButtonGroup size="lg">
<Button color="primary">
Left
</Button>
<Button color="primary">
Middle
</Button>
<Button color="primary" >
Right
</Button>
</ButtonGroup>
<br />
<ButtonGroup className="mt-2">
<Button color="light" >
Left
</Button>
<Button color="light" >
Middle
</Button>
<Button color="light">
Right
</Button>
</ButtonGroup>
<br />
<ButtonGroup size="sm" className="mt-2">
<Button color="danger">
Left
</Button>
<Button color="danger">
Middle
</Button>
<Button color="danger" >
Right
</Button>
</ButtonGroup>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Vertical variation</h4>
<p className="card-title-desc">Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
<ButtonGroup vertical>
<Button
type="button"
color="light"
>
Button
</Button>
<ButtonDropdown
isOpen={this.state.drp_link}
toggle={() =>
this.setState({ drp_link: !this.state.drp_link })
}
>
<DropdownToggle caret color="light">
Dropdown <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown link</DropdownItem>
<DropdownItem>Dropdown link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<Button
color="light"
type="button"
>
Button
</Button>
<Button
color="light"
type="button"
>
Button
</Button>
</ButtonGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #9
| Source File: UiDropdown.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Dropdowns" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Single button dropdowns</h4>
<p className="card-title-desc">Any single <code
className="highlighter-rouge">.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code className="highlighter-rouge"><button></code> elements:</p>
<Row>
<Col sm={6}>
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
Dropdown button{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
Dropdown button{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<Col sm={6}>
<Dropdown
isOpen={this.state.singlebtn1}
toggle={() =>
this.setState({ singlebtn1: !this.state.singlebtn1 })
}
>
<DropdownToggle color="light" caret>
Dropdown Link <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Variant</h4>
<p className="card-title-desc">The best part is you can do this with any button variant, too:</p>
<div className="">
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnprimary1}
toggle={() =>
this.setState({ btnprimary1: !this.state.btnprimary1 })
}
>
<DropdownToggle tag="button" className="btn btn-primary">
Primary <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>{" "}
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnlight1}
toggle={() =>
this.setState({ btnlight1: !this.state.btnlight1 })
}
>
<DropdownToggle tag="button" className="btn btn-light">
Light <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>{" "}
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnsuccess1}
toggle={() =>
this.setState({ btnsuccess1: !this.state.btnsuccess1 })
}
>
<DropdownToggle tag="button" className="btn btn-success">
Success <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnInfo1}
toggle={() =>
this.setState({ btnInfo1: !this.state.btnInfo1 })
}
>
<DropdownToggle tag="button" className="btn btn-info">
Info <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnWarning1}
toggle={() =>
this.setState({ btnWarning1: !this.state.btnWarning1 })
}
>
<DropdownToggle tag="button" className="btn btn-warning">
Warning <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnDanger1}
toggle={() =>
this.setState({ btnDanger1: !this.state.btnDanger1 })
}
>
<DropdownToggle tag="button" className="btn btn-danger">
Danger <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Split button dropdowns</h4>
<p className="card-title-desc">The best part is you can do this with any button variant, too:</p>
<div className="d-flex">
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_primary1}
toggle={() =>
this.setState({
drp_primary1: !this.state.drp_primary1
})
}
>
<Button id="caret" color="primary">
Primary
</Button>
<DropdownToggle caret color="primary">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_secondary1}
toggle={() =>
this.setState({
drp_secondary1: !this.state.drp_secondary1
})
}
>
<Button id="caret" color="light">
Light
</Button>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_success1}
toggle={() =>
this.setState({
drp_success1: !this.state.drp_success1
})
}
>
<Button id="caret" color="success">
Success
</Button>
<DropdownToggle caret color="success">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_info1}
toggle={() =>
this.setState({ drp_info1: !this.state.drp_info1 })
}
>
<Button id="caret" color="info">
Info
</Button>
<DropdownToggle caret color="info">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</div>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_warning1}
toggle={() =>
this.setState({
drp_warning1: !this.state.drp_warning1
})
}
>
<Button id="caret" color="warning">
Warning
</Button>
<DropdownToggle caret color="warning">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_danger1}
toggle={() =>
this.setState({
drp_danger1: !this.state.drp_danger1
})
}
>
<Button id="caret" color="danger">
Danger
</Button>
<DropdownToggle caret color="danger">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Sizing</h4>
<p className="card-title-desc"> Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_secondary}
toggle={() =>
this.setState({
drp_secondary: !this.state.drp_secondary
})
}
>
<DropdownToggle
caret
color="primary"
size="lg"
>
Large button {" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>{" "}
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_light_large}
toggle={() =>
this.setState({
drp_light_large: !this.state.drp_light_large
})
}
>
<Button id="caret" color="light" size="lg">
Large Button
</Button>
<DropdownToggle caret color="light" size="lg">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_secondary_sm}
toggle={() =>
this.setState({
drp_secondary_sm: !this.state.drp_secondary_sm
})
}
>
<DropdownToggle
caret
color="primary"
size="sm"
>
Small button {" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>{" "}
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_light_sm}
toggle={() =>
this.setState({
drp_light_sm: !this.state.drp_light_sm
})
}
>
<Button id="caret" color="light" size="sm">
Small Button
</Button>
<DropdownToggle caret color="light" size="sm">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>{" "}
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dropup variation</h4>
<p className="card-title-desc">Trigger dropdown menus above elements by adding <code className="highlighter-rouge">.dropup</code> to the parent element.</p>
<div className="d-flex">
<Dropdown
isOpen={this.state.dropup1}
direction="up"
toggle={() =>
this.setState({ dropup1: !this.state.dropup1 })
}
>
<DropdownToggle color="light">
Dropup <i className="mdi mdi-chevron-up"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<ButtonDropdown
direction="up"
isOpen={this.state.drp_up11}
toggle={() =>
this.setState({
drp_up11: !this.state.drp_up11
})
}
>
<Button id="caret" color="light">
Split dropup
</Button>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-up"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Menu alignment</h4>
<p className="card-title-desc">Add <code className="highlighter-rouge">.dropdown-menu-right</code> to a <code className="highlighter-rouge">.dropdown-menu</code> to right align the dropdown menu.</p>
<ButtonDropdown
isOpen={this.state.drop_align}
direction="right"
toggle={() =>
this.setState({ drop_align: !this.state.drop_align })
}
>
<DropdownToggle
caret
color="secondary"
className="btn btn-secondary"
>
Menu is right-aligned{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-right-custom">
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dropright variation</h4>
<p className="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropright</code> to the parent element.</p>
<div className="d-flex">
<Dropdown
isOpen={this.state.info_dropup1}
direction="right"
toggle={() =>
this.setState({
info_dropup1: !this.state.info_dropup1
})
}
>
<DropdownToggle color="light" caret>
Dropright <i className="mdi mdi-chevron-right"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<ButtonDropdown
direction="right"
isOpen={this.state.infodrp_up11}
toggle={() =>
this.setState({
infodrp_up11: !this.state.infodrp_up11
})
}
>
<Button id="caret" color="light">
Split dropright
</Button>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-right"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dropleft variation</h4>
<p className="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropleft</code> to the parent element.</p>
<div className="d-flex">
<Dropdown
isOpen={this.state.info_dropup111}
direction="left"
toggle={() =>
this.setState({
info_dropup111: !this.state.info_dropup111
})
}
>
<DropdownToggle color="light">
<i className="mdi mdi-chevron-left"></i> Dropleft
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<ButtonDropdown
direction="left"
isOpen={this.state.infodrp_up1111}
toggle={() =>
this.setState({
infodrp_up1111: !this.state.infodrp_up1111
})
}
>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-left"></i>
</DropdownToggle>
<Button id="caret" color="light">
Split dropleft
</Button>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #10
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user_id } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
console.log(sport)
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Dashboard
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #11
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user_id } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
history.push("/")
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
console.log(sport)
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Cancel
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #12
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const user = localStorage.getItem('user');
useEffect(() => {
if (!user) history.push('/login');
}, [])
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
history.push("/")
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Cancel
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #13
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const user = localStorage.getItem('user');
useEffect(() => {
if (!user) history.push('/login');
}, [])
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
history.push("/")
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Cancel
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #14
| Source File: ButtonDropdowns.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>
<DropdownToggle caret>
Button Dropdown
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Single button dropdowns</strong>
</CardHeader>
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
<DropdownToggle caret color="primary">
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[2]} toggle={() => { this.toggle(2); }}>
<DropdownToggle caret color="secondary">
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[3]} toggle={() => { this.toggle(3); }}>
<DropdownToggle caret color="success">
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[4]} toggle={() => { this.toggle(4); }}>
<DropdownToggle caret color="info">
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[5]} toggle={() => { this.toggle(5); }}>
<DropdownToggle caret color="warning">
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[6]} toggle={() => { this.toggle(6); }}>
<DropdownToggle caret color="danger">
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Split button dropdowns</strong>
</CardHeader>
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[7]} toggle={() => { this.toggle(7); }}>
<Button id="caret" color="primary">Primary</Button>
<DropdownToggle caret color="primary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[8]} toggle={() => { this.toggle(8); }}>
<Button id="caret" color="secondary">Secondary</Button>
<DropdownToggle caret color="secondary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[9]} toggle={() => { this.toggle(9); }}>
<Button id="caret" color="success">Success</Button>
<DropdownToggle caret color="success" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[10]} toggle={() => { this.toggle(10); }}>
<Button id="caret" color="info">Info</Button>
<DropdownToggle caret color="info" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[11]} toggle={() => { this.toggle(11); }}>
<Button id="caret" color="warning">Warning</Button>
<DropdownToggle caret color="warning" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[12]} toggle={() => { this.toggle(12); }}>
<Button id="caret" color="danger">Danger</Button>
<DropdownToggle caret color="danger" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdown directions</strong>
</CardHeader>
<CardBody>
<ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[13]} toggle={() => { this.toggle(13); }}>
<DropdownToggle caret size="lg">
Direction Up
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[14]} toggle={() => { this.toggle(14); }}>
<DropdownToggle caret size="lg">
Direction Left
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
<DropdownToggle caret size="lg">
Direction Right
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}>
<DropdownToggle caret size="lg">
Default Down
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong>
</CardHeader>
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}>
<DropdownToggle caret size="lg">
Large Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}>
<DropdownToggle caret size="sm">
Small Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #15
| Source File: ButtonGroups.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Vertical variation</strong>
</CardHeader>
<CardBody>
<ButtonGroup vertical>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
</CardHeader>
<CardBody>
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
</ButtonGroup>
<ButtonGroup>
<Button>8</Button>
</ButtonGroup>
</ButtonToolbar>
</CardBody>
</Card>
</Col>
<Col md={6}>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Sizing</strong>
</CardHeader>
<CardBody>
<ButtonGroup size="lg">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr />
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr />
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Nesting</strong>
</CardHeader>
<CardBody>
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>with input groups</small>
</CardHeader>
<CardBody>
<ButtonToolbar className="mb-3">
<ButtonGroup className="mr-2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
<ButtonToolbar className="justify-content-between">
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #16
| Source File: Dashboard.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" lg="3">
<Card className="text-white bg-info">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1} toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData2} options={cardChartOpts2} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2} toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle className="p-0" color="transparent">
<i className="icon-location-pin"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData1} options={cardChartOpts1} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3} toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper" style={{ height: '70px' }}>
<Line data={cardChartData3} options={cardChartOpts3} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4} toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70} />
</div>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBody>
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
<div className="small text-muted">November 2015</div>
</Col>
<Col sm="7" className="d-none d-sm-inline-block">
<Button color="primary" className="float-right"><i className="icon-cloud-download"></i></Button>
<ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
<ButtonGroup className="mr-3" aria-label="First group">
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(1)} active={this.state.radioSelected === 1}>Day</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(2)} active={this.state.radioSelected === 2}>Month</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(3)} active={this.state.radioSelected === 3}>Year</Button>
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<div className="chart-wrapper" style={{ height: 300 + 'px', marginTop: 40 + 'px' }}>
<Line data={mainChart} options={mainChartOpts} height={300} />
</div>
</CardBody>
<CardFooter>
<Row className="text-center">
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<Progress className="progress-xs mt-2" color="success" value="40" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<Progress className="progress-xs mt-2" color="info" value="20" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<Progress className="progress-xs mt-2" color="warning" value="60" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<Progress className="progress-xs mt-2" color="danger" value="80" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<Progress className="progress-xs mt-2" color="primary" value="40" />
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
Traffic {' & '} Sales
</CardHeader>
<CardBody>
<Row>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="34" />
<Progress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="56" />
<Progress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="12" />
<Progress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="43" />
<Progress className="progress-xs" color="danger" value="91" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="22" />
<Progress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="53" />
<Progress className="progress-xs" color="danger" value="82" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="9" />
<Progress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><Badge pill color="info"> </Badge></sup>
New clients
<sup className="px-1"><Badge pill color="danger"> </Badge></sup>
Recurring clients
</small>
</div>
</Col>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<ul>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-user progress-group-icon"></i>
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<i className="icon-user-female progress-group-icon"></i>
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-globe progress-group-icon"></i>
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="56" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-facebook progress-group-icon"></i>
<span className="title">Facebook</span>
<span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="15" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-twitter progress-group-icon"></i>
<span className="title">Twitter</span>
<span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="11" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-linkedin progress-group-icon"></i>
<span className="title">LinkedIn</span>
<span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="8" />
</div>
</div>
<div className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="" data-original-title="show more"><i className="icon-options"></i></Button>
</div>
</ul>
</Col>
</Row>
<br />
<Table hover responsive className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><i className="icon-people"></i></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/1.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-us h4 mb-0" title="us" id="us"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<i className="fa fa-cc-mastercard" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-br h4 mb-0" title="br" id="br"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<i className="fa fa-cc-visa" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-in h4 mb-0" title="in" id="in"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<i className="fa fa-cc-stripe" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-fr h4 mb-0" title="fr" id="fr"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<i className="fa fa-paypal" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-es h4 mb-0" title="es" id="es"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<i className="fa fa-google-wallet" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-pl h4 mb-0" title="pl" id="pl"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<i className="fa fa-cc-amex" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
