refactor: v2.0.0-alpha.3
- refactor(Colors): view layout, minor temp tweaks - refactor(FullAside): - ListGroup (deprecate callout) - refactor(Full*): containers minor fixes - refactor(Dropdowns): minor fixes - refactor(Forms): `card-header-actions` - feat(Forms): `<Input type="date">` - feat(Forms): `FormFeedback` - feat(Collapses): Accordion, Custom Accordion - feat(ListGroup): with TabPanes - refactor(PaginationItem): `tag="button"` - refactor(BrandButtons): spacing - refactor:(Buttons): view layout
This commit is contained in:
xidedix
parent
71b1911de7
commit
1892c401aa
16
CHANGELOG.md
16
CHANGELOG.md
@ -1,10 +1,18 @@
|
|||||||
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
|
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
|
||||||
|
|
||||||
##### `v2.0.0-alpha.3`
|
##### `v2.0.0-alpha.3`
|
||||||
- refactor: Colors
|
- refactor(Colors): view layout, minor temp tweaks
|
||||||
- refactor: FullAside - ListGroup (deprecate callout)
|
- refactor(FullAside): - ListGroup (deprecate callout)
|
||||||
- refactor: Full* containers minor fixes
|
- refactor(Full*): containers minor fixes
|
||||||
- refactor: Dropdowns minor fixes
|
- refactor(Dropdowns): minor fixes
|
||||||
|
- refactor(Forms): `card-header-actions`
|
||||||
|
- feat(Forms): `<Input type="date">`
|
||||||
|
- feat(Forms): `FormFeedback`
|
||||||
|
- feat(Collapses): Accordion, Custom Accordion
|
||||||
|
- feat(ListGroup): with TabPanes
|
||||||
|
- refactor(PaginationItem): `tag="button"`
|
||||||
|
- refactor(BrandButtons): spacing
|
||||||
|
- refactor:(Buttons): view layout
|
||||||
|
|
||||||
##### `v2.0.0-alpha.2`
|
##### `v2.0.0-alpha.2`
|
||||||
- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
|
- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
"url": "git@github.com:mrholek/CoreUI-React.git"
|
"url": "git@github.com:mrholek/CoreUI-React.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coreui/coreui": "^2.0.0-beta.5",
|
"@coreui/coreui": "^2.0.0-beta.6",
|
||||||
"@coreui/react": "^2.0.0-alpha.5",
|
"@coreui/react": "^2.0.0-alpha.5",
|
||||||
"babel-jest": "^22.4.3",
|
"babel-jest": "^22.4.3",
|
||||||
"bootstrap": "4.0.0",
|
"bootstrap": "4.0.0",
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* CoreUI - Open Source Dashboard UI Kit
|
* CoreUI - Open Source Dashboard UI Kit
|
||||||
* @version v2.0.0-beta.5
|
* @version v2.0.0-beta.6
|
||||||
* @link https://coreui.io
|
* @link https://coreui.io
|
||||||
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
||||||
* Licensed under MIT (https://coreui.io/license)
|
* Licensed under MIT (https://coreui.io/license)
|
||||||
@ -7423,17 +7423,16 @@ canvas {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 0.76563rem;
|
font-size: 0.76563rem;
|
||||||
white-space: nowrap; }
|
white-space: nowrap; }
|
||||||
|
.chartjs-tooltip .tooltip-body-item-color {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.875rem;
|
||||||
|
height: 0.875rem;
|
||||||
|
margin-right: 0.875rem; }
|
||||||
.chartjs-tooltip .tooltip-body-item-value {
|
.chartjs-tooltip .tooltip-body-item-value {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-weight: 700; }
|
font-weight: 700; }
|
||||||
|
|
||||||
.chartjs-tooltip-key {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.875rem;
|
|
||||||
height: 0.875rem;
|
|
||||||
margin-right: 0.875rem; }
|
|
||||||
|
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
|
|||||||
@ -1,7 +1,27 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row } from 'reactstrap';
|
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
|
||||||
|
|
||||||
class Cards extends Component {
|
class Cards extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.toggle = this.toggle.bind(this);
|
||||||
|
this.toggleFade = this.toggleFade.bind(this);
|
||||||
|
this.state = {
|
||||||
|
collapse: true,
|
||||||
|
fadeIn: true,
|
||||||
|
timeout: 300
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.setState({ collapse: !this.state.collapse });
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleFade() {
|
||||||
|
this.setState({ fadeIn: !this.state.fadeIn });
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
@ -356,9 +376,30 @@ class Cards extends Component {
|
|||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
<Col xs="12" sm="6" md="4">
|
||||||
|
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
Card actions
|
||||||
|
<div className="card-header-actions">
|
||||||
|
<a href="#" className="card-header-action btn btn-setting"><i className="icon-settings"></i></a>
|
||||||
|
<a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a>
|
||||||
|
<a className="card-header-action btn btn-close" onClick={this.toggleFade}><i className="icon-close"></i></a>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<Collapse isOpen={this.state.collapse} id="collapseExample">
|
||||||
|
<CardBody>
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
</CardBody>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
</Fade>
|
||||||
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Card, CardBody, CardFooter, CardHeader, Collapse, Fade } from 'reactstrap';
|
import { Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
|
||||||
|
|
||||||
class Collapses extends Component {
|
class Collapses extends Component {
|
||||||
|
|
||||||
@ -10,9 +10,13 @@ class Collapses extends Component {
|
|||||||
this.onExiting = this.onExiting.bind(this);
|
this.onExiting = this.onExiting.bind(this);
|
||||||
this.onExited = this.onExited.bind(this);
|
this.onExited = this.onExited.bind(this);
|
||||||
this.toggle = this.toggle.bind(this);
|
this.toggle = this.toggle.bind(this);
|
||||||
|
this.toggleAccordion = this.toggleAccordion.bind(this);
|
||||||
|
this.toggleCustom = this.toggleCustom.bind(this);
|
||||||
this.toggleFade = this.toggleFade.bind(this);
|
this.toggleFade = this.toggleFade.bind(this);
|
||||||
this.state = {
|
this.state = {
|
||||||
collapse: false,
|
collapse: false,
|
||||||
|
accordion: [true, false, false],
|
||||||
|
custom: [true, false],
|
||||||
status: 'Closed',
|
status: 'Closed',
|
||||||
fadeIn: true,
|
fadeIn: true,
|
||||||
timeout: 300,
|
timeout: 300,
|
||||||
@ -39,6 +43,26 @@ class Collapses extends Component {
|
|||||||
this.setState({ collapse: !this.state.collapse });
|
this.setState({ collapse: !this.state.collapse });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleAccordion(tab) {
|
||||||
|
|
||||||
|
const prevState = this.state.accordion;
|
||||||
|
const state = prevState.map((x, index) => tab === index ? !x : false);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
accordion: state,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleCustom(tab) {
|
||||||
|
|
||||||
|
const prevState = this.state.custom;
|
||||||
|
const state = prevState.map((x, index) => tab === index ? !x : false);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
custom: state,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
toggleFade() {
|
toggleFade() {
|
||||||
this.setState({ fadeIn: !this.state.fadeIn });
|
this.setState({ fadeIn: !this.state.fadeIn });
|
||||||
}
|
}
|
||||||
@ -46,68 +70,157 @@ class Collapses extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
<Card>
|
<Row>
|
||||||
<CardHeader>
|
<Col xl="6">
|
||||||
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
|
<Card>
|
||||||
<div className="card-header-actions">
|
<CardHeader>
|
||||||
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
|
||||||
<small className="text-muted">docs</small>
|
<div className="card-header-actions">
|
||||||
</a>
|
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||||
</div>
|
<small className="text-muted">docs</small>
|
||||||
</CardHeader>
|
</a>
|
||||||
<Collapse
|
</div>
|
||||||
isOpen={this.state.collapse}
|
</CardHeader>
|
||||||
onEntering={this.onEntering}
|
<Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
|
||||||
onEntered={this.onEntered}
|
<CardBody>
|
||||||
onExiting={this.onExiting}
|
<p>
|
||||||
onExited={this.onExited}
|
Anim pariatur cliche reprehenderit,
|
||||||
>
|
enim eiusmod high life accusamus terry richardson ad squid. Nihil
|
||||||
<CardBody>
|
anim keffiyeh helvetica, craft beer labore wes anderson cred
|
||||||
<p>
|
nesciunt sapiente ea proident.
|
||||||
Anim pariatur cliche reprehenderit,
|
</p>
|
||||||
enim eiusmod high life accusamus terry richardson ad squid. Nihil
|
<p>
|
||||||
anim keffiyeh helvetica, craft beer labore wes anderson cred
|
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
|
||||||
nesciunt sapiente ea proident.
|
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
|
||||||
</p>
|
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
|
||||||
<p>
|
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
|
||||||
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
|
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
|
||||||
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
|
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
|
||||||
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
|
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
|
||||||
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
|
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
|
||||||
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
|
vehicula sagittis elit leo id nisi.
|
||||||
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
|
</p>
|
||||||
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
|
</CardBody>
|
||||||
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
|
</Collapse>
|
||||||
vehicula sagittis elit leo id nisi.
|
<CardFooter>
|
||||||
</p>
|
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
|
||||||
</CardBody>
|
<h5>Current state: {this.state.status}</h5>
|
||||||
</Collapse>
|
</CardFooter>
|
||||||
<CardFooter>
|
</Card>
|
||||||
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
|
<Card>
|
||||||
<h5>Current state: {this.state.status}</h5>
|
<CardHeader>
|
||||||
</CardFooter>
|
<i className="fa fa-align-justify"></i><strong>Fade</strong>
|
||||||
</Card>
|
<div className="card-header-actions">
|
||||||
<Card>
|
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||||
<CardHeader>
|
<small className="text-muted">docs</small>
|
||||||
<i className="fa fa-align-justify"></i><strong>Fade</strong>
|
</a>
|
||||||
<div className="card-header-actions">
|
</div>
|
||||||
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
</CardHeader>
|
||||||
<small className="text-muted">docs</small>
|
<CardBody>
|
||||||
</a>
|
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
|
||||||
</div>
|
This content will fade in and out as the button is pressed...
|
||||||
</CardHeader>
|
</Fade>
|
||||||
<CardBody>
|
</CardBody>
|
||||||
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
|
<CardFooter>
|
||||||
This content will fade in and out as the button is pressed...
|
<Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
|
||||||
</Fade>
|
</CardFooter>
|
||||||
</CardBody>
|
</Card>
|
||||||
<CardFooter>
|
</Col>
|
||||||
<Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
|
<Col xl="6">
|
||||||
</CardFooter>
|
<Card>
|
||||||
</Card>
|
<CardHeader>
|
||||||
|
<i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<div id="accordion">
|
||||||
|
<Card>
|
||||||
|
<CardHeader id="headingOne">
|
||||||
|
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
|
||||||
|
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
|
||||||
|
<CardBody>
|
||||||
|
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
|
||||||
|
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
|
||||||
|
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
|
||||||
|
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
||||||
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||||
|
</CardBody>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader id="headingTwo">
|
||||||
|
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
|
||||||
|
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
|
||||||
|
<CardBody>
|
||||||
|
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
|
||||||
|
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
|
||||||
|
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
|
||||||
|
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
||||||
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||||
|
</CardBody>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader id="headingThree">
|
||||||
|
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
|
||||||
|
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
|
||||||
|
<CardBody>
|
||||||
|
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
|
||||||
|
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
|
||||||
|
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
|
||||||
|
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
||||||
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||||
|
</CardBody>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<div id="exampleAccordion" data-children=".item">
|
||||||
|
<div className="item">
|
||||||
|
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(0)} aria-expanded={this.state.custom[0]} aria-controls="exampleAccordion1">
|
||||||
|
Toggle item
|
||||||
|
</Button>
|
||||||
|
<Collapse isOpen={this.state.custom[0]} data-parent="#exampleAccordion" id="exampleAccordion1">
|
||||||
|
<p className="mb-3">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget
|
||||||
|
tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
|
||||||
|
</p>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(1)} aria-expanded={this.state.custom[1]} aria-controls="exampleAccordion2">
|
||||||
|
Toggle item 2
|
||||||
|
</Button>
|
||||||
|
<Collapse isOpen={this.state.custom[1]} data-parent="#exampleAccordion" id="exampleAccordion2">
|
||||||
|
<p className="mb-3">
|
||||||
|
Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et
|
||||||
|
malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes,
|
||||||
|
nascetur ridiculus mus.
|
||||||
|
</p>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Collapses;
|
export default Collapses;
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import {
|
|||||||
Form,
|
Form,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
FormText,
|
FormText,
|
||||||
|
FormFeedback,
|
||||||
Input,
|
Input,
|
||||||
InputGroup,
|
InputGroup,
|
||||||
InputGroupAddon,
|
InputGroupAddon,
|
||||||
@ -127,14 +128,14 @@ class Forms extends Component {
|
|||||||
<Label htmlFor="street">Street</Label>
|
<Label htmlFor="street">Street</Label>
|
||||||
<Input type="text" id="street" placeholder="Enter street name" />
|
<Input type="text" id="street" placeholder="Enter street name" />
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup row>
|
<FormGroup row className="my-0">
|
||||||
<Col xs="8">
|
<Col xs="8">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="city">City</Label>
|
<Label htmlFor="city">City</Label>
|
||||||
<Input type="text" id="city" placeholder="Enter your city" />
|
<Input type="text" id="city" placeholder="Enter your city" />
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="8">
|
<Col xs="4">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="postal-code">Postal Code</Label>
|
<Label htmlFor="postal-code">Postal Code</Label>
|
||||||
<Input type="text" id="postal-code" placeholder="Postal Code" />
|
<Input type="text" id="postal-code" placeholder="Postal Code" />
|
||||||
@ -192,6 +193,14 @@ class Forms extends Component {
|
|||||||
<FormText className="help-block">Please enter a complex password</FormText>
|
<FormText className="help-block">Please enter a complex password</FormText>
|
||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
<FormGroup row>
|
||||||
|
<Col md="3">
|
||||||
|
<Label htmlFor="date-input">Date Input</Label>
|
||||||
|
</Col>
|
||||||
|
<Col xs="12" md="9">
|
||||||
|
<Input type="date" id="date-input" name="date-input" placeholder="date" />
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="3">
|
<Col md="3">
|
||||||
<Label htmlFor="disabled-input">Disabled Input</Label>
|
<Label htmlFor="disabled-input">Disabled Input</Label>
|
||||||
@ -572,11 +581,13 @@ class Forms extends Component {
|
|||||||
<CardBody>
|
<CardBody>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="inputIsValid">Input is valid</Label>
|
<Label htmlFor="inputIsValid">Input is valid</Label>
|
||||||
<Input type="text" className="is-valid" id="inputIsValid" />
|
<Input type="text" valid id="inputIsValid" />
|
||||||
|
<FormFeedback valid>Cool! Input is valid</FormFeedback>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
|
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
|
||||||
<Input type="text" className="is-invalid" id="inputIsInvalid" />
|
<Input type="text" invalid id="inputIsInvalid" />
|
||||||
|
<FormFeedback>Houston, we have a problem...</FormFeedback>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@ -591,10 +602,12 @@ class Forms extends Component {
|
|||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="inputSuccess2i">Non-required input</Label>
|
<Label htmlFor="inputSuccess2i">Non-required input</Label>
|
||||||
<Input type="text" className="form-control-success" id="inputSuccess2i" />
|
<Input type="text" className="form-control-success" id="inputSuccess2i" />
|
||||||
|
<FormFeedback valid>Non-required</FormFeedback>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="inputWarning2i">Required input</Label>
|
<Label htmlFor="inputWarning2i">Required input</Label>
|
||||||
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
|
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
|
||||||
|
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
@ -1051,9 +1064,9 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-edit"></i>Form Elements
|
<i className="fa fa-edit"></i>Form Elements
|
||||||
<div className="card-header-actions">
|
<div className="card-header-actions">
|
||||||
<a href="#" className="card-header-action btn-setting"><i className="icon-settings"></i></a>
|
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
|
||||||
<a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a>
|
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
|
||||||
<a href="#" className="card-header-action btn-close"><i className="icon-close"></i></a>
|
<Button color="link" className="card-header-action btn-close"><i className="icon-close"></i></Button>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<Collapse isOpen={this.state.collapse} id="collapseExample">
|
<Collapse isOpen={this.state.collapse} id="collapseExample">
|
||||||
|
|||||||
@ -1,50 +1,56 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Card, CardBody, CardHeader, Container, Jumbotron } from 'reactstrap';
|
import { Button, Card, CardBody, CardHeader, Col, Container, Jumbotron, Row } from 'reactstrap';
|
||||||
|
|
||||||
class Jumbotrons extends Component {
|
class Jumbotrons extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
<Card>
|
<Row>
|
||||||
<CardHeader>
|
<Col>
|
||||||
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
<Card>
|
||||||
<div className="card-header-actions">
|
<CardHeader>
|
||||||
<a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
||||||
<small className="text-muted">docs</small>
|
<div className="card-header-actions">
|
||||||
</a>
|
<a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||||
</div>
|
<small className="text-muted">docs</small>
|
||||||
</CardHeader>
|
</a>
|
||||||
<CardBody>
|
</div>
|
||||||
<Jumbotron>
|
</CardHeader>
|
||||||
<h1 className="display-3">Hello, world!</h1>
|
<CardBody>
|
||||||
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
|
<Jumbotron>
|
||||||
attention to featured content or information.</p>
|
<h1 className="display-3">Hello, world!</h1>
|
||||||
<hr className="my-2" />
|
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
|
||||||
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
|
attention to featured content or information.</p>
|
||||||
<p className="lead">
|
<hr className="my-2" />
|
||||||
<Button color="primary">Learn More</Button>
|
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
|
||||||
</p>
|
<p className="lead">
|
||||||
</Jumbotron>
|
<Button color="primary">Learn More</Button>
|
||||||
</CardBody>
|
</p>
|
||||||
</Card>
|
</Jumbotron>
|
||||||
<Card>
|
</CardBody>
|
||||||
<CardHeader>
|
</Card>
|
||||||
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
</Col>
|
||||||
<small> fluid</small>
|
<Col>
|
||||||
</CardHeader>
|
<Card>
|
||||||
<CardBody>
|
<CardHeader>
|
||||||
<Jumbotron fluid>
|
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
||||||
<Container fluid>
|
<small> fluid</small>
|
||||||
<h1 className="display-3">Fluid jumbotron</h1>
|
</CardHeader>
|
||||||
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
<CardBody>
|
||||||
</Container>
|
<Jumbotron fluid>
|
||||||
</Jumbotron>
|
<Container fluid>
|
||||||
</CardBody>
|
<h1 className="display-3">Fluid jumbotron</h1>
|
||||||
</Card>
|
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
||||||
|
</Container>
|
||||||
|
</Jumbotron>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Jumbotrons;
|
export default Jumbotrons;
|
||||||
|
|||||||
@ -1,8 +1,25 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row } from 'reactstrap';
|
import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row, TabContent, TabPane } from 'reactstrap';
|
||||||
|
|
||||||
class ListGroups extends Component {
|
class ListGroups extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.toggle = this.toggle.bind(this);
|
||||||
|
this.state = {
|
||||||
|
activeTab: 1
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle(tab) {
|
||||||
|
if (this.state.activeTab !== tab) {
|
||||||
|
this.setState({
|
||||||
|
activeTab: tab
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
@ -150,9 +167,60 @@ class ListGroups extends Component {
|
|||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<Row>
|
||||||
|
<Col xs="4">
|
||||||
|
<ListGroup id="list-tab" role="tablist">
|
||||||
|
<ListGroupItem onClick={() => this.toggle(0)} action active={this.state.activeTab === 0} >Home</ListGroupItem>
|
||||||
|
<ListGroupItem onClick={() => this.toggle(1)} action active={this.state.activeTab === 1} >Profile</ListGroupItem>
|
||||||
|
<ListGroupItem onClick={() => this.toggle(2)} action active={this.state.activeTab === 2} >Messages</ListGroupItem>
|
||||||
|
<ListGroupItem onClick={() => this.toggle(3)} action active={this.state.activeTab === 3} >Settings</ListGroupItem>
|
||||||
|
</ListGroup>
|
||||||
|
</Col>
|
||||||
|
<Col xs="8">
|
||||||
|
<TabContent activeTab={this.state.activeTab}>
|
||||||
|
<TabPane tabId={0} >
|
||||||
|
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
|
||||||
|
nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
|
||||||
|
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
|
||||||
|
eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tabId={1}>
|
||||||
|
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
|
||||||
|
dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
|
||||||
|
anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
|
||||||
|
reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tabId={2}>
|
||||||
|
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
|
||||||
|
nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
|
||||||
|
est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
|
||||||
|
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
|
||||||
|
laborum elit adipisicing pariatur cillum.</p>
|
||||||
|
</TabPane>
|
||||||
|
<TabPane tabId={3}>
|
||||||
|
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
|
||||||
|
sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
|
||||||
|
aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
|
||||||
|
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
|
||||||
|
eiusmod eu pariatur culpa mollit in irure.</p>
|
||||||
|
</TabPane>
|
||||||
|
</TabContent>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ListGroups;
|
export default ListGroups;
|
||||||
|
|||||||
@ -18,35 +18,35 @@ class Paginations extends Component {
|
|||||||
<CardBody>
|
<CardBody>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink previous href="#" />
|
<PaginationLink previous tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
1
|
1
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
2
|
2
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
3
|
3
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
4
|
4
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
5
|
5
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink next href="#" />
|
<PaginationLink next tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
@ -59,35 +59,35 @@ class Paginations extends Component {
|
|||||||
<CardBody>
|
<CardBody>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem disabled>
|
<PaginationItem disabled>
|
||||||
<PaginationLink previous href="#" />
|
<PaginationLink previous tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
1
|
1
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
2
|
2
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
3
|
3
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
4
|
4
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
5
|
5
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink next href="#" />
|
<PaginationLink next tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
@ -100,71 +100,71 @@ class Paginations extends Component {
|
|||||||
<CardBody>
|
<CardBody>
|
||||||
<Pagination size="lg">
|
<Pagination size="lg">
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink previous href="#" />
|
<PaginationLink previous tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
1
|
1
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
2
|
2
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
3
|
3
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem className="d-none d-sm-block">
|
<PaginationItem className="d-none d-sm-block">
|
||||||
<PaginationLink next href="#" />
|
<PaginationLink next tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink previous href="#" />
|
<PaginationLink previous tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
1
|
1
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
2
|
2
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
3
|
3
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink next href="#" />
|
<PaginationLink next tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
<Pagination size="sm">
|
<Pagination size="sm">
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink previous href="#" />
|
<PaginationLink previous tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
1
|
1
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
2
|
2
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">
|
<PaginationLink tag="button">
|
||||||
3
|
3
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink next href="#" />
|
<PaginationLink next tag="button" />
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
@ -174,4 +174,4 @@ class Paginations extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Paginations;
|
export default Paginations;
|
||||||
|
|||||||
@ -66,22 +66,22 @@ class Tables extends Component {
|
|||||||
</Table>
|
</Table>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink previous href="#"></PaginationLink>
|
<PaginationLink previous tag="button"></PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">1</PaginationLink>
|
<PaginationLink tag="button">1</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">2</PaginationLink>
|
<PaginationLink tag="button">2</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">3</PaginationLink>
|
<PaginationLink tag="button">3</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink href="#">4</PaginationLink>
|
<PaginationLink tag="button">4</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem>
|
<PaginationItem>
|
||||||
<PaginationLink next href="#"></PaginationLink>
|
<PaginationLink next tag="button"></PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
@ -147,14 +147,14 @@ class Tables extends Component {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem disabled><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
<PaginationItem disabled><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">1</PaginationLink>
|
<PaginationLink tag="button">1</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@ -222,14 +222,14 @@ class Tables extends Component {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">1</PaginationLink>
|
<PaginationLink tag="button">1</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@ -294,14 +294,14 @@ class Tables extends Component {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">1</PaginationLink>
|
<PaginationLink tag="button">1</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem className="page-item"><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
<PaginationItem className="page-item"><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@ -370,14 +370,14 @@ class Tables extends Component {
|
|||||||
</Table>
|
</Table>
|
||||||
<nav>
|
<nav>
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationItem><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">1</PaginationLink>
|
<PaginationLink tag="button">1</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</nav>
|
</nav>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
|
|||||||
@ -21,89 +21,89 @@ class BrandButtons extends Component {
|
|||||||
<small> Add this class <code>.btn-sm</code></small>
|
<small> Add this class <code>.btn-sm</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button size="sm" className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
|
<Button size="sm" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
|
||||||
<Button size="sm" className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
|
<Button size="sm" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
|
||||||
<Button size="sm" className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
|
<Button size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
|
||||||
<Button size="sm" className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
|
<Button size="sm" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
|
||||||
<Button size="sm" className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
|
<Button size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
|
||||||
<Button size="sm" className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
|
<Button size="sm" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
|
||||||
<Button size="sm" className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
|
<Button size="sm" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
|
||||||
<Button size="sm" className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
|
<Button size="sm" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
|
||||||
<Button size="sm" className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
|
<Button size="sm" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
|
||||||
<Button size="sm" className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
|
<Button size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
|
||||||
<Button size="sm" className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
|
<Button size="sm" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
|
||||||
<Button size="sm" className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
|
<Button size="sm" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
|
||||||
<Button size="sm" className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
|
<Button size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
|
||||||
<Button size="sm" className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
|
<Button size="sm" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
|
||||||
<Button size="sm" className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
|
<Button size="sm" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
|
||||||
<Button size="sm" className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
|
<Button size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
|
||||||
<Button size="sm" className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
|
<Button size="sm" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
|
||||||
<Button size="sm" className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
|
<Button size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
|
||||||
<Button size="sm" className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
|
<Button size="sm" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
|
||||||
<Button size="sm" className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
|
<Button size="sm" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
|
||||||
<Button size="sm" className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
|
<Button size="sm" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
|
||||||
<Button size="sm" className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
|
<Button size="sm" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
|
||||||
<Button size="sm" className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
|
<Button size="sm" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
|
||||||
<Button size="sm" className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
<Button size="sm" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
||||||
<Button size="sm" className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
<Button size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
<h6>Size Normal</h6>
|
<h6>Size Normal</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
|
<Button className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
|
||||||
<Button className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
|
<Button className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
|
||||||
<Button className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
|
<Button className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
|
||||||
<Button className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
|
<Button className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
|
||||||
<Button className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
|
<Button className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
|
||||||
<Button className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
|
<Button className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
|
||||||
<Button className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
|
<Button className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
|
||||||
<Button className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
|
<Button className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
|
||||||
<Button className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
|
<Button className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
|
||||||
<Button className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
|
<Button className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
|
||||||
<Button className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
|
<Button className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
|
||||||
<Button className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
|
<Button className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
|
||||||
<Button className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
|
<Button className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
|
||||||
<Button className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
|
<Button className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
|
||||||
<Button className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
|
<Button className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
|
||||||
<Button className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
|
<Button className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
|
||||||
<Button className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
|
<Button className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
|
||||||
<Button className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
|
<Button className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
|
||||||
<Button className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
|
<Button className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
|
||||||
<Button className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
|
<Button className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
|
||||||
<Button className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
|
<Button className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
|
||||||
<Button className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
|
<Button className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
|
||||||
<Button className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
|
<Button className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
|
||||||
<Button className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
<Button className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
||||||
<Button className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
<Button className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
<h6>Size Large
|
<h6>Size Large
|
||||||
<small> Add this class <code>.btn-lg</code></small>
|
<small> Add this class <code>.btn-lg</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button size="lg" className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
|
<Button size="lg" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
|
||||||
<Button size="lg" className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
|
<Button size="lg" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
|
||||||
<Button size="lg" className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
|
<Button size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
|
||||||
<Button size="lg" className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
|
<Button size="lg" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
|
||||||
<Button size="lg" className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
|
<Button size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
|
||||||
<Button size="lg" className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
|
<Button size="lg" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
|
||||||
<Button size="lg" className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
|
<Button size="lg" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
|
||||||
<Button size="lg" className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
|
<Button size="lg" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
|
||||||
<Button size="lg" className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
|
<Button size="lg" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
|
||||||
<Button size="lg" className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
|
<Button size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
|
||||||
<Button size="lg" className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
|
<Button size="lg" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
|
||||||
<Button size="lg" className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
|
<Button size="lg" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
|
||||||
<Button size="lg" className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
|
<Button size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
|
||||||
<Button size="lg" className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
|
<Button size="lg" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
|
||||||
<Button size="lg" className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
|
<Button size="lg" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
|
||||||
<Button size="lg" className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
|
<Button size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
|
||||||
<Button size="lg" className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
|
<Button size="lg" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
|
||||||
<Button size="lg" className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
|
<Button size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
|
||||||
<Button size="lg" className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
|
<Button size="lg" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
|
||||||
<Button size="lg" className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
|
<Button size="lg" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
|
||||||
<Button size="lg" className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
|
<Button size="lg" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
|
||||||
<Button size="lg" className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
|
<Button size="lg" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
|
||||||
<Button size="lg" className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
|
<Button size="lg" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
|
||||||
<Button size="lg" className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
<Button size="lg" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
||||||
<Button size="lg" className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
<Button size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@ -124,89 +124,89 @@ class BrandButtons extends Component {
|
|||||||
<small> Add this class <code>.btn-sm</code></small>
|
<small> Add this class <code>.btn-sm</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button size="sm" className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
|
<Button size="sm" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
|
||||||
<Button size="sm" className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
|
<Button size="sm" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
|
||||||
<Button size="sm" className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
|
<Button size="sm" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
|
||||||
<Button size="sm" className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
|
<Button size="sm" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
|
||||||
<Button size="sm" className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
|
<Button size="sm" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
|
||||||
<Button size="sm" className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
|
<Button size="sm" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
|
||||||
<Button size="sm" className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
|
<Button size="sm" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
|
||||||
<Button size="sm" className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
|
<Button size="sm" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
|
||||||
<Button size="sm" className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
|
<Button size="sm" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
|
||||||
<Button size="sm" className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
|
<Button size="sm" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
|
||||||
<Button size="sm" className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
|
<Button size="sm" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
|
||||||
<Button size="sm" className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
|
<Button size="sm" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
|
||||||
<Button size="sm" className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
|
<Button size="sm" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
|
||||||
<Button size="sm" className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
|
<Button size="sm" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
|
||||||
<Button size="sm" className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
|
<Button size="sm" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
|
||||||
<Button size="sm" className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
|
<Button size="sm" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
|
||||||
<Button size="sm" className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
|
<Button size="sm" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
|
||||||
<Button size="sm" className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
|
<Button size="sm" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
|
||||||
<Button size="sm" className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
|
<Button size="sm" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
|
||||||
<Button size="sm" className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
|
<Button size="sm" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
|
||||||
<Button size="sm" className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
|
<Button size="sm" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
|
||||||
<Button size="sm" className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
|
<Button size="sm" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
|
||||||
<Button size="sm" className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
|
<Button size="sm" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
|
||||||
<Button size="sm" className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
|
<Button size="sm" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
|
||||||
<Button size="sm" className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
|
<Button size="sm" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
|
||||||
</p>
|
</p>
|
||||||
<h6>Size Normal</h6>
|
<h6>Size Normal</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
|
<Button className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
|
||||||
<Button className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
|
<Button className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
|
||||||
<Button className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
|
<Button className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
|
||||||
<Button className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
|
<Button className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
|
||||||
<Button className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
|
<Button className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
|
||||||
<Button className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
|
<Button className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
|
||||||
<Button className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
|
<Button className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
|
||||||
<Button className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
|
<Button className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
|
||||||
<Button className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
|
<Button className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
|
||||||
<Button className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
|
<Button className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
|
||||||
<Button className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
|
<Button className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
|
||||||
<Button className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
|
<Button className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
|
||||||
<Button className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
|
<Button className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
|
||||||
<Button className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
|
<Button className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
|
||||||
<Button className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
|
<Button className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
|
||||||
<Button className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
|
<Button className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
|
||||||
<Button className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
|
<Button className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
|
||||||
<Button className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
|
<Button className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
|
||||||
<Button className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
|
<Button className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
|
||||||
<Button className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
|
<Button className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
|
||||||
<Button className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
|
<Button className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
|
||||||
<Button className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
|
<Button className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
|
||||||
<Button className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
|
<Button className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
|
||||||
<Button className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
|
<Button className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
|
||||||
<Button className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
|
<Button className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
|
||||||
</p>
|
</p>
|
||||||
<h6>Size Large
|
<h6>Size Large
|
||||||
<small> Add this class <code>.btn-lg</code></small>
|
<small> Add this class <code>.btn-lg</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button size="lg" className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
|
<Button size="lg" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
|
||||||
<Button size="lg" className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
|
<Button size="lg" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
|
||||||
<Button size="lg" className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
|
<Button size="lg" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
|
||||||
<Button size="lg" className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
|
<Button size="lg" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
|
||||||
<Button size="lg" className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
|
<Button size="lg" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
|
||||||
<Button size="lg" className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
|
<Button size="lg" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
|
||||||
<Button size="lg" className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
|
<Button size="lg" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
|
||||||
<Button size="lg" className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
|
<Button size="lg" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
|
||||||
<Button size="lg" className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
|
<Button size="lg" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
|
||||||
<Button size="lg" className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
|
<Button size="lg" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
|
||||||
<Button size="lg" className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
|
<Button size="lg" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
|
||||||
<Button size="lg" className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
|
<Button size="lg" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
|
||||||
<Button size="lg" className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
|
<Button size="lg" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
|
||||||
<Button size="lg" className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
|
<Button size="lg" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
|
||||||
<Button size="lg" className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
|
<Button size="lg" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
|
||||||
<Button size="lg" className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
|
<Button size="lg" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
|
||||||
<Button size="lg" className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
|
<Button size="lg" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
|
||||||
<Button size="lg" className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
|
<Button size="lg" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
|
||||||
<Button size="lg" className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
|
<Button size="lg" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
|
||||||
<Button size="lg" className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
|
<Button size="lg" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
|
||||||
<Button size="lg" className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
|
<Button size="lg" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
|
||||||
<Button size="lg" className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
|
<Button size="lg" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
|
||||||
<Button size="lg" className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
|
<Button size="lg" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
|
||||||
<Button size="lg" className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
|
<Button size="lg" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
|
||||||
<Button size="lg" className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
|
<Button size="lg" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
|
||||||
</p>
|
</p>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@ -227,89 +227,89 @@ class BrandButtons extends Component {
|
|||||||
<small> Add this class <code>.btn-sm</code></small>
|
<small> Add this class <code>.btn-sm</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button size="sm" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
|
<Button size="sm" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
|
||||||
<Button size="sm" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
|
<Button size="sm" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
|
||||||
<Button size="sm" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
|
<Button size="sm" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
|
||||||
<Button size="sm" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
|
<Button size="sm" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
|
||||||
<Button size="sm" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
|
<Button size="sm" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
|
||||||
<Button size="sm" className="btn-xing btn-brand text"><span>Xing</span></Button>
|
<Button size="sm" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
|
||||||
<Button size="sm" className="btn-github btn-brand text"><span>Github</span></Button>
|
<Button size="sm" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
|
||||||
<Button size="sm" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
|
<Button size="sm" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
|
||||||
<Button size="sm" className="btn-openid btn-brand text"><span>OpenID</span></Button>
|
<Button size="sm" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
|
||||||
<Button size="sm" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
|
<Button size="sm" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
|
||||||
<Button size="sm" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
|
<Button size="sm" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
|
||||||
<Button size="sm" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
|
<Button size="sm" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
|
||||||
<Button size="sm" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
|
<Button size="sm" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
|
||||||
<Button size="sm" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
|
<Button size="sm" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
|
||||||
<Button size="sm" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
|
<Button size="sm" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
|
||||||
<Button size="sm" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
|
<Button size="sm" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
|
||||||
<Button size="sm" className="btn-vk btn-brand text"><span>VK</span></Button>
|
<Button size="sm" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
|
||||||
<Button size="sm" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
|
<Button size="sm" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
|
||||||
<Button size="sm" className="btn-behance btn-brand text"><span>Behance</span></Button>
|
<Button size="sm" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
|
||||||
<Button size="sm" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
|
<Button size="sm" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
|
||||||
<Button size="sm" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
|
<Button size="sm" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
|
||||||
<Button size="sm" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
|
<Button size="sm" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
|
||||||
<Button size="sm" className="btn-vine btn-brand text"><span>Vine</span></Button>
|
<Button size="sm" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
|
||||||
<Button size="sm" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
|
<Button size="sm" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
|
||||||
<Button size="sm" className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
|
<Button size="sm" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
<h6>Size Normal</h6>
|
<h6>Size Normal</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>
|
<Button className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
|
||||||
<Button className="btn-twitter btn-brand text"><span>Twitter</span></Button>
|
<Button className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
|
||||||
<Button className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
|
<Button className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
|
||||||
<Button className="btn-flickr btn-brand text"><span>Flickr</span></Button>
|
<Button className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
|
||||||
<Button className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
|
<Button className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
|
||||||
<Button className="btn-xing btn-brand text"><span>Xing</span></Button>
|
<Button className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
|
||||||
<Button className="btn-github btn-brand text"><span>Github</span></Button>
|
<Button className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
|
||||||
<Button className="btn-html5 btn-brand text"><span>HTML5</span></Button>
|
<Button className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
|
||||||
<Button className="btn-openid btn-brand text"><span>OpenID</span></Button>
|
<Button className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
|
||||||
<Button className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
|
<Button className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
|
||||||
<Button className="btn-css3 btn-brand text"><span>CSS3</span></Button>
|
<Button className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
|
||||||
<Button className="btn-youtube btn-brand text"><span>YouTube</span></Button>
|
<Button className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
|
||||||
<Button className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
|
<Button className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
|
||||||
<Button className="btn-google-plus btn-brand text"><span>Google+</span></Button>
|
<Button className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
|
||||||
<Button className="btn-instagram btn-brand text"><span>Instagram</span></Button>
|
<Button className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
|
||||||
<Button className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
|
<Button className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
|
||||||
<Button className="btn-vk btn-brand text"><span>VK</span></Button>
|
<Button className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
|
||||||
<Button className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
|
<Button className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
|
||||||
<Button className="btn-behance btn-brand text"><span>Behance</span></Button>
|
<Button className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
|
||||||
<Button className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
|
<Button className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
|
||||||
<Button className="btn-reddit btn-brand text"><span>Reddit</span></Button>
|
<Button className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
|
||||||
<Button className="btn-spotify btn-brand text"><span>Spotify</span></Button>
|
<Button className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
|
||||||
<Button className="btn-vine btn-brand text"><span>Vine</span></Button>
|
<Button className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
|
||||||
<Button className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
|
<Button className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
|
||||||
<Button className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
|
<Button className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
<h6>Size Large
|
<h6>Size Large
|
||||||
<small> Add this class <code>.btn-lg</code></small>
|
<small> Add this class <code>.btn-lg</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
<Button size="lg" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
|
<Button size="lg" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
|
||||||
<Button size="lg" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
|
<Button size="lg" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
|
||||||
<Button size="lg" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
|
<Button size="lg" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
|
||||||
<Button size="lg" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
|
<Button size="lg" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
|
||||||
<Button size="lg" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
|
<Button size="lg" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
|
||||||
<Button size="lg" className="btn-xing btn-brand text"><span>Xing</span></Button>
|
<Button size="lg" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
|
||||||
<Button size="lg" className="btn-github btn-brand text"><span>Github</span></Button>
|
<Button size="lg" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
|
||||||
<Button size="lg" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
|
<Button size="lg" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
|
||||||
<Button size="lg" className="btn-openid btn-brand text"><span>OpenID</span></Button>
|
<Button size="lg" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
|
||||||
<Button size="lg" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
|
<Button size="lg" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
|
||||||
<Button size="lg" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
|
<Button size="lg" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
|
||||||
<Button size="lg" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
|
<Button size="lg" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
|
||||||
<Button size="lg" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
|
<Button size="lg" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
|
||||||
<Button size="lg" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
|
<Button size="lg" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
|
||||||
<Button size="lg" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
|
<Button size="lg" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
|
||||||
<Button size="lg" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
|
<Button size="lg" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
|
||||||
<Button size="lg" className="btn-vk btn-brand text"><span>VK</span></Button>
|
<Button size="lg" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
|
||||||
<Button size="lg" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
|
<Button size="lg" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
|
||||||
<Button size="lg" className="btn-behance btn-brand text"><span>Behance</span></Button>
|
<Button size="lg" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
|
||||||
<Button size="lg" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
|
<Button size="lg" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
|
||||||
<Button size="lg" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
|
<Button size="lg" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
|
||||||
<Button size="lg" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
|
<Button size="lg" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
|
||||||
<Button size="lg" className="btn-vine btn-brand text"><span>Vine</span></Button>
|
<Button size="lg" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
|
||||||
<Button size="lg" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
|
<Button size="lg" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
|
||||||
<Button size="lg" className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
|
<Button size="lg" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@ -40,7 +40,7 @@ class ButtonGroups extends Component {
|
|||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12">
|
<Col md="6">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
|
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
|
||||||
@ -58,6 +58,26 @@ class ButtonGroups extends Component {
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</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[1]} toggle={() => { this.toggle(1); }}>
|
||||||
|
<DropdownToggle caret>
|
||||||
|
Dropdown
|
||||||
|
</DropdownToggle>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem>Dropdown Link</DropdownItem>
|
||||||
|
<DropdownItem>Dropdown Link</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</ButtonDropdown>
|
||||||
|
</ButtonGroup>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
|
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
|
||||||
@ -81,38 +101,8 @@ class ButtonGroups extends Component {
|
|||||||
</ButtonToolbar>
|
</ButtonToolbar>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
</Col>
|
||||||
<CardHeader>
|
<Col md={6}>
|
||||||
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
|
|
||||||
<small>mix 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>
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Sizing</strong>
|
<i className="fa fa-align-justify"></i><strong>Sizing</strong>
|
||||||
@ -157,24 +147,39 @@ class ButtonGroups extends Component {
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Vertical variation</strong>
|
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>with input groups</small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<ButtonGroup vertical>
|
<ButtonToolbar className="mb-3">
|
||||||
<Button>1</Button>
|
<ButtonGroup className="mr-2">
|
||||||
<Button>2</Button>
|
<Button>1</Button>
|
||||||
<ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
|
<Button>2</Button>
|
||||||
<DropdownToggle caret>
|
<Button>3</Button>
|
||||||
Dropdown
|
<Button>4</Button>
|
||||||
</DropdownToggle>
|
</ButtonGroup>
|
||||||
<DropdownMenu>
|
<InputGroup>
|
||||||
<DropdownItem>Dropdown Link</DropdownItem>
|
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
|
||||||
<DropdownItem>Dropdown Link</DropdownItem>
|
<Input placeholder="Input group example" />
|
||||||
</DropdownMenu>
|
</InputGroup>
|
||||||
</ButtonDropdown>
|
</ButtonToolbar>
|
||||||
</ButtonGroup>
|
<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>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
@ -184,4 +189,4 @@ class ButtonGroups extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ButtonGroups;
|
export default ButtonGroups;
|
||||||
|
|||||||
@ -5,6 +5,627 @@ class Buttons extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>Standard Buttons</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<Row className="d-flex justify-content-between align-items-center">
|
||||||
|
<Col>
|
||||||
|
<p>Normal</p>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="primary" type="button">Primary</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="secondary" type="button">Secondary</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="success" type="button">Success</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="warning" type="button">Warning</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="danger" type="button">Danger</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="info" type="button">Info</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="light" type="button">Light</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="dark" type="button">Dark</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="link" type="button">Link</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Active State
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="primary" type="button" aria-pressed="true">Primary</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="secondary" type="button" aria-pressed="true">Secondary</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="success" type="button" aria-pressed="true">Success</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="warning" type="button" aria-pressed="true">Warning</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="danger" type="button" aria-pressed="true">Danger</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="info" type="button" aria-pressed="true">Info</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="light" type="button" aria-pressed="true">Light</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="dark" type="button" aria-pressed="true">Dark</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button active block color="link" type="button" aria-pressed="true">Link</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Disabled
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="primary" type="button" disabled>Primary</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="secondary" type="button" disabled>Secondary</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="success" type="button" disabled>Success</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="warning" type="button" disabled>Warning</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="danger" type="button" disabled>Danger</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="info" type="button" disabled>Info</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="light" type="button" disabled>Light</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="dark" type="button" disabled>Dark</Button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button block color="link" type="button" disabled>Link</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>Outline Buttons</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<p>
|
||||||
|
Use <code>.btn-outline-*</code> class for outline buttons.
|
||||||
|
</p>
|
||||||
|
<Row className="align-items-center">
|
||||||
|
<Col className="col">
|
||||||
|
Normal
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-primary">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-secondary">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-success">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-warning">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-danger">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-info">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-light">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-dark">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col></Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col className="col">
|
||||||
|
Active State
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-primary active" aria-pressed="true">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-secondary active" aria-pressed="true">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-success active" aria-pressed="true">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-warning active" aria-pressed="true">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-danger active" aria-pressed="true">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-info active" aria-pressed="true">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-light active" aria-pressed="true">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-dark active" aria-pressed="true">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col></Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Disabled
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-primary" disabled>Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-secondary" disabled>Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-success" disabled>Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-warning" disabled>Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-danger" disabled>Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-info" disabled>Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-light" disabled>Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-outline-dark" disabled>Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col></Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>Ghost Buttons</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<p>
|
||||||
|
Use
|
||||||
|
<code>.btn-ghost-*</code> class for ghost buttons.
|
||||||
|
</p>
|
||||||
|
<Row className="align-items-center">
|
||||||
|
<Col>
|
||||||
|
Normal
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-primary">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-secondary">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-success">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-warning">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-danger">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-info">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-light">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-dark">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col></Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Active State
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-primary active" aria-pressed="true">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-secondary active" aria-pressed="true">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-success active" aria-pressed="true">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-warning active" aria-pressed="true">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-danger active" aria-pressed="true">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-info active" aria-pressed="true">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-light active" aria-pressed="true">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-dark active" aria-pressed="true">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col></Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Disabled
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-primary" disabled>Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-secondary" disabled>Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-success" disabled>Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-warning" disabled>Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-danger" disabled>Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-info" disabled>Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-light" disabled>Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-block btn-ghost-dark" disabled>Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col></Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>Square Buttons</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<p>
|
||||||
|
Use
|
||||||
|
<code>.btn-square</code> class for square buttons.
|
||||||
|
</p>
|
||||||
|
<Row className="align-items-center">
|
||||||
|
<Col>
|
||||||
|
Normal
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-primary">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-secondary">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-success">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-warning">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-danger">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-info">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-light">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-dark">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-link">Link</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Active State
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-primary active" aria-pressed="true">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-secondary active" aria-pressed="true">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-success active" aria-pressed="true">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-warning active" aria-pressed="true">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-danger active" aria-pressed="true">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-info active" aria-pressed="true">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-light active" aria-pressed="true">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-dark active" aria-pressed="true">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-link active" aria-pressed="true">Link</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col className="col">
|
||||||
|
Disabled
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-primary" disabled>Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-secondary" disabled>Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-success" disabled>Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-warning" disabled>Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-danger" disabled>Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-info" disabled>Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-light" disabled>Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-dark" disabled>Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-square btn-block btn-link" disabled>Link</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>Pill Buttons</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<p>
|
||||||
|
Use
|
||||||
|
<code>.btn-pill</code> class for pill buttons.
|
||||||
|
</p>
|
||||||
|
<Row className="align-items-center">
|
||||||
|
<Col>
|
||||||
|
Normal
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-primary">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-secondary">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-success">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-warning">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-danger">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-info">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-light">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-dark">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-link">Link</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Active State
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-primary active" aria-pressed="true">Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-secondary active" aria-pressed="true">Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-success active" aria-pressed="true">Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-warning active" aria-pressed="true">Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-danger active" aria-pressed="true">Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-info active" aria-pressed="true">Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-light active" aria-pressed="true">Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-dark active" aria-pressed="true">Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-link active" aria-pressed="true">Link</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col>
|
||||||
|
Disabled
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-primary" disabled>Primary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-secondary" disabled>Secondary</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-success" disabled>Success</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-warning" disabled>Warning</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-danger" disabled>Danger</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-info" disabled>Info</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-light" disabled>Light</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-dark" disabled>Dark</button>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<button type="button" className="btn btn-pill btn-block btn-link" disabled>Link</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>Sizes</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
|
||||||
|
<Row className="row align-items-center">
|
||||||
|
<Col>
|
||||||
|
Small add
|
||||||
|
<code>.btn-sm</code>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-sm btn-primary">Standard Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-sm btn-outline-secondary">Outline Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-sm btn-ghost-success">Ghost Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-sm btn-square btn-warning">Square Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-sm btn-pill btn-danger">Pill Button</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col className="col">
|
||||||
|
Normal
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-primary">Standard Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-outline-secondary">Outline Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-ghost-success">Ghost Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-square btn-warning">Square Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-pill btn-danger">Pill Button</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className="row align-items-center mt-3">
|
||||||
|
<Col className="col">
|
||||||
|
Large add <code>.btn-lg</code>.
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-lg btn-primary">Standard Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-lg btn-outline-secondary">Outline Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-lg btn-ghost-success">Ghost Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-lg btn-square btn-warning">Square Button</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-lg btn-pill btn-danger">Pill Button</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<strong>With Icons</strong>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<Row className="align-items-center mt-3">
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-primary">
|
||||||
|
<i className="fa fa-lightbulb-o"></i> Standard Button
|
||||||
|
</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-outline-secondary">
|
||||||
|
<i className="fa fa-lightbulb-o"></i> Outline Button
|
||||||
|
</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-ghost-success">
|
||||||
|
<i className="fa fa-lightbulb-o"></i> Ghost Button
|
||||||
|
</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-square btn-warning">
|
||||||
|
<i className="fa fa-lightbulb-o"></i> Square Button
|
||||||
|
</button>
|
||||||
|
</Col>
|
||||||
|
<Col className="col text-center">
|
||||||
|
<button type="button" className="btn btn-pill btn-danger">
|
||||||
|
<i className="fa fa-lightbulb-o"></i> Pill Button
|
||||||
|
</button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12" md="6">
|
<Col xs="12" md="6">
|
||||||
<Card>
|
<Card>
|
||||||
@ -36,9 +657,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Large</strong>
|
<strong>Size Large</strong>
|
||||||
<small>Add this class <code>.btn-lg</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add this class <code>.btn-lg</code></p>
|
||||||
<Button color="primary" size="lg">Primary</Button>
|
<Button color="primary" size="lg">Primary</Button>
|
||||||
<Button color="secondary" size="lg">Secondary</Button>
|
<Button color="secondary" size="lg">Secondary</Button>
|
||||||
<Button color="success" size="lg">Success</Button>
|
<Button color="success" size="lg">Success</Button>
|
||||||
@ -51,9 +672,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Small</strong>
|
<strong>Size Small</strong>
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.btn-sm</code></p>
|
||||||
<Button color="primary" size="sm">Primary</Button>
|
<Button color="primary" size="sm">Primary</Button>
|
||||||
<Button color="secondary" size="sm">Secondary</Button>
|
<Button color="secondary" size="sm">Secondary</Button>
|
||||||
<Button color="success" size="sm">Success</Button>
|
<Button color="success" size="sm">Success</Button>
|
||||||
@ -66,9 +687,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Disabled state</strong>
|
<strong>Disabled state</strong>
|
||||||
<small>Add this <code>disabled="disabled"</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add <code>disabled="disabled"</code></p>
|
||||||
<Button color="primary" disabled>Primary</Button>
|
<Button color="primary" disabled>Primary</Button>
|
||||||
<Button color="secondary" disabled>Secondary</Button>
|
<Button color="secondary" disabled>Secondary</Button>
|
||||||
<Button color="success" disabled>Success</Button>
|
<Button color="success" disabled>Success</Button>
|
||||||
@ -81,9 +702,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Active state</strong>
|
<strong>Active state</strong>
|
||||||
<small>Add this class <code>.active</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.active</code></p>
|
||||||
<Button color="primary" active>Primary</Button>
|
<Button color="primary" active>Primary</Button>
|
||||||
<Button color="secondary" active>Secondary</Button>
|
<Button color="secondary" active>Secondary</Button>
|
||||||
<Button color="success" active>Success</Button>
|
<Button color="success" active>Success</Button>
|
||||||
@ -96,9 +717,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Block Level Buttons</strong>
|
<strong>Block Level Buttons</strong>
|
||||||
<small>Add this class <code>.btn-block</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.btn-block</code></p>
|
||||||
<Button color="secondary" size="lg" block>Block level button</Button>
|
<Button color="secondary" size="lg" block>Block level button</Button>
|
||||||
<Button color="primary" size="lg" block>Block level button</Button>
|
<Button color="primary" size="lg" block>Block level button</Button>
|
||||||
<Button color="success" size="lg" block>Block level button</Button>
|
<Button color="success" size="lg" block>Block level button</Button>
|
||||||
@ -137,9 +758,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Large</strong>
|
<strong>Size Large</strong>
|
||||||
<small>Add this class <code>.btn-lg</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.btn-lg</code></p>
|
||||||
<Button outline color="primary" size="lg">Primary</Button>
|
<Button outline color="primary" size="lg">Primary</Button>
|
||||||
<Button outline color="secondary" size="lg">Secondary</Button>
|
<Button outline color="secondary" size="lg">Secondary</Button>
|
||||||
<Button outline color="success" size="lg">Success</Button>
|
<Button outline color="success" size="lg">Success</Button>
|
||||||
@ -151,9 +772,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Small</strong>
|
<strong>Size Small</strong>
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.btn-sm</code></p>
|
||||||
<Button outline color="primary" size="sm">Primary</Button>
|
<Button outline color="primary" size="sm">Primary</Button>
|
||||||
<Button outline color="secondary" size="sm">Secondary</Button>
|
<Button outline color="secondary" size="sm">Secondary</Button>
|
||||||
<Button outline color="success" size="sm">Success</Button>
|
<Button outline color="success" size="sm">Success</Button>
|
||||||
@ -165,9 +786,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Disabled state</strong>
|
<strong>Disabled state</strong>
|
||||||
<small>Add this <code>disabled="disabled"</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add <code>disabled="disabled"</code></p>
|
||||||
<Button outline color="primary" disabled>Primary</Button>
|
<Button outline color="primary" disabled>Primary</Button>
|
||||||
<Button outline color="secondary" disabled>Secondary</Button>
|
<Button outline color="secondary" disabled>Secondary</Button>
|
||||||
<Button color="success" disabled>Success</Button>
|
<Button color="success" disabled>Success</Button>
|
||||||
@ -179,9 +800,9 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Active state</strong>
|
<strong>Active state</strong>
|
||||||
<small>Add this class <code>.active</code></small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.active</code></p>
|
||||||
<Button outline color="primary" active>Primary</Button>
|
<Button outline color="primary" active>Primary</Button>
|
||||||
<Button outline color="secondary" active>Secondary</Button>
|
<Button outline color="secondary" active>Secondary</Button>
|
||||||
<Button outline color="success" active>Success</Button>
|
<Button outline color="success" active>Success</Button>
|
||||||
@ -193,9 +814,10 @@ class Buttons extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Block Level Buttons</strong>
|
<strong>Block Level Buttons</strong>
|
||||||
<small>Add this class <code>.btn-block</code></small>
|
{/*<small>Add this class <code>.btn-block</code></small>*/}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
<p>Add class <code>.btn-block</code></p>
|
||||||
<Button outline color="secondary" size="lg" block>Block level button</Button>
|
<Button outline color="secondary" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="primary" size="lg" block>Block level button</Button>
|
<Button outline color="primary" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="success" size="lg" block>Block level button</Button>
|
<Button outline color="success" size="lg" block>Block level button</Button>
|
||||||
|
|||||||
@ -26,7 +26,7 @@ class Badges extends Component {
|
|||||||
</CardBody>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button color="primary" outline>
|
<Button color="primary" outline>
|
||||||
Notifications <Badge color="secondary" style={{ position: 'static' }}>4</Badge>
|
Notifications <Badge color="secondary" pill style={{ position: 'static' }}>9</Badge>
|
||||||
</Button>
|
</Button>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
@ -34,8 +34,7 @@ class Badges extends Component {
|
|||||||
<Col xs="12" md="6">
|
<Col xs="12" md="6">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Badges</strong>
|
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small>
|
||||||
<small>contextual variations</small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Badge className="mr-1" color="primary">Primary</Badge>
|
<Badge className="mr-1" color="primary">Primary</Badge>
|
||||||
@ -50,8 +49,7 @@ class Badges extends Component {
|
|||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Badges</strong>
|
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small>
|
||||||
<small>pill badges</small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Badge className="mr-1" color="primary" pill>Primary</Badge>
|
<Badge className="mr-1" color="primary" pill>Primary</Badge>
|
||||||
@ -66,8 +64,7 @@ class Badges extends Component {
|
|||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i><strong>Badges</strong>
|
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small>
|
||||||
<small>links</small>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Badge className="mr-1" href="#" color="primary">Primary</Badge>
|
<Badge className="mr-1" href="#" color="primary">Primary</Badge>
|
||||||
@ -87,4 +84,4 @@ class Badges extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Badges;
|
export default Badges;
|
||||||
|
|||||||
@ -2,13 +2,26 @@ import React, { Component } from 'react';
|
|||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Row, Col } from 'reactstrap'
|
import { Row, Col } from 'reactstrap'
|
||||||
import { rgbToHex }from '@coreui/coreui/js/src/utilities/'
|
// import { rgbToHex } from '@coreui/coreui/js/src/utilities/'
|
||||||
|
|
||||||
|
const rgbToHex = (color) => {
|
||||||
|
const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)
|
||||||
|
if (rgb) {
|
||||||
|
const r = `0${parseInt(rgb[1], 10).toString(16)}`
|
||||||
|
const g = `0${parseInt(rgb[2], 10).toString(16)}`
|
||||||
|
const b = `0${parseInt(rgb[3], 10).toString(16)}`
|
||||||
|
|
||||||
|
return rgb ? `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}` : ''
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
class ThemeView extends Component {
|
class ThemeView extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
bgColor: 'rgb(255, 0, 0)'
|
bgColor: 'rgb(255, 255, 255)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -16,7 +29,7 @@ class ThemeView extends Component {
|
|||||||
const elem = ReactDOM.findDOMNode(this).parentNode.firstChild
|
const elem = ReactDOM.findDOMNode(this).parentNode.firstChild
|
||||||
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
|
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
|
||||||
this.setState({
|
this.setState({
|
||||||
bgColor: color
|
bgColor: color || this.state.bgColor
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -40,12 +53,13 @@ class ThemeView extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class ThemeColor extends Component {
|
class ThemeColor extends Component {
|
||||||
constructor(props) {
|
// constructor(props) {
|
||||||
super(props);
|
// super(props);
|
||||||
}
|
// }
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
const { className, children, ...attributes } = this.props
|
// const { className, children, ...attributes } = this.props
|
||||||
|
const { className, children } = this.props
|
||||||
|
|
||||||
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
|
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user