reactstrap#ButtonToolbar JavaScript Examples
The following examples show how to use
reactstrap#ButtonToolbar.
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: email-toolbar.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<ButtonToolbar className="p-3" role="toolbar">
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Button type="button" color="primary" className=" waves-light waves-effect"><i className="fa fa-inbox"></i></Button>
<Button type="button" color="primary" className="waves-light waves-effect"><i className="fa fa-exclamation-circle"></i></Button>
<Button type="button" color="primary" className="waves-light waves-effect"><i className="far fa-trash-alt"></i></Button>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Dropdown isOpen={this.state.folder_menu} toggle={this.toggleFolder}>
<DropdownToggle tag="button" type="button" caret className="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i className="fa fa-folder mr-1"></i>
<i className="mdi mdi-chevron-down ml-1"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag="a" href="#">Updates</DropdownItem>
<DropdownItem tag="a" href="#">Social</DropdownItem>
<DropdownItem tag="a" href="#">Team Manage</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Dropdown isOpen={this.state.tag_menu} toggle={this.toggleTag}>
<DropdownToggle tag="button" className="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i className="fa fa-tag mr-1"></i>
<i className="mdi mdi-chevron-down ml-1"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag="a" href="#">Updates</DropdownItem>
<DropdownItem tag="a" href="#">Social</DropdownItem>
<DropdownItem tag="a" href="#">Team Manage</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Dropdown isOpen={this.state.more_menu} toggle={this.toggleMore}>
<DropdownToggle tag="button" className="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
More <i className="mdi mdi-dots-vertical ml-2"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag="a" href="#">Mark as Unread</DropdownItem>
<DropdownItem tag="a" href="#">Mark as Important</DropdownItem>
<DropdownItem tag="a" href="#">Add to Tasks</DropdownItem>
<DropdownItem tag="a" href="#">Add Star</DropdownItem>
<DropdownItem tag="a" href="#">Mute</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
</ButtonToolbar>
</React.Fragment>
);
}
Example #2
| 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 #3
| 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 #4
| 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>
);
}
