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
|
||||
|
||||
##### `v2.0.0-alpha.3`
|
||||
- refactor: Colors
|
||||
- refactor: FullAside - ListGroup (deprecate callout)
|
||||
- refactor: Full* containers minor fixes
|
||||
- refactor: Dropdowns minor fixes
|
||||
- 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
|
||||
|
||||
##### `v2.0.0-alpha.2`
|
||||
- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
"url": "git@github.com:mrholek/CoreUI-React.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/coreui": "^2.0.0-beta.5",
|
||||
"@coreui/coreui": "^2.0.0-beta.6",
|
||||
"@coreui/react": "^2.0.0-alpha.5",
|
||||
"babel-jest": "^22.4.3",
|
||||
"bootstrap": "4.0.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* CoreUI - Open Source Dashboard UI Kit
|
||||
* @version v2.0.0-beta.5
|
||||
* @version v2.0.0-beta.6
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://coreui.io/license)
|
||||
@ -7423,16 +7423,15 @@ canvas {
|
||||
align-items: center;
|
||||
font-size: 0.76563rem;
|
||||
white-space: nowrap; }
|
||||
.chartjs-tooltip .tooltip-body-item-value {
|
||||
padding-left: 1rem;
|
||||
margin-left: auto;
|
||||
font-weight: 700; }
|
||||
|
||||
.chartjs-tooltip-key {
|
||||
.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 {
|
||||
padding-left: 1rem;
|
||||
margin-left: auto;
|
||||
font-weight: 700; }
|
||||
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
|
||||
@ -1,7 +1,27 @@
|
||||
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 {
|
||||
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() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
@ -356,9 +376,30 @@ class Cards extends Component {
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" sm="6" md="4">
|
||||
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Card actions
|
||||
<div className="card-header-actions">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 {
|
||||
|
||||
@ -10,9 +10,13 @@ class Collapses extends Component {
|
||||
this.onExiting = this.onExiting.bind(this);
|
||||
this.onExited = this.onExited.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.state = {
|
||||
collapse: false,
|
||||
accordion: [true, false, false],
|
||||
custom: [true, false],
|
||||
status: 'Closed',
|
||||
fadeIn: true,
|
||||
timeout: 300,
|
||||
@ -39,6 +43,26 @@ class Collapses extends Component {
|
||||
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() {
|
||||
this.setState({ fadeIn: !this.state.fadeIn });
|
||||
}
|
||||
@ -46,6 +70,8 @@ class Collapses extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Row>
|
||||
<Col xl="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
|
||||
@ -55,13 +81,7 @@ class Collapses extends Component {
|
||||
</a>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Collapse
|
||||
isOpen={this.state.collapse}
|
||||
onEntering={this.onEntering}
|
||||
onEntered={this.onEntered}
|
||||
onExiting={this.onExiting}
|
||||
onExited={this.onExited}
|
||||
>
|
||||
<Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
|
||||
<CardBody>
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit,
|
||||
@ -105,6 +125,99 @@ class Collapses extends Component {
|
||||
<Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl="6">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
Form,
|
||||
FormGroup,
|
||||
FormText,
|
||||
FormFeedback,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
@ -127,14 +128,14 @@ class Forms extends Component {
|
||||
<Label htmlFor="street">Street</Label>
|
||||
<Input type="text" id="street" placeholder="Enter street name" />
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<FormGroup row className="my-0">
|
||||
<Col xs="8">
|
||||
<FormGroup>
|
||||
<Label htmlFor="city">City</Label>
|
||||
<Input type="text" id="city" placeholder="Enter your city" />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs="8">
|
||||
<Col xs="4">
|
||||
<FormGroup>
|
||||
<Label htmlFor="postal-code">Postal Code</Label>
|
||||
<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>
|
||||
</Col>
|
||||
</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>
|
||||
<Col md="3">
|
||||
<Label htmlFor="disabled-input">Disabled Input</Label>
|
||||
@ -572,11 +581,13 @@ class Forms extends Component {
|
||||
<CardBody>
|
||||
<FormGroup>
|
||||
<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>
|
||||
<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>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -591,10 +602,12 @@ class Forms extends Component {
|
||||
<FormGroup>
|
||||
<Label htmlFor="inputSuccess2i">Non-required input</Label>
|
||||
<Input type="text" className="form-control-success" id="inputSuccess2i" />
|
||||
<FormFeedback valid>Non-required</FormFeedback>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label htmlFor="inputWarning2i">Required input</Label>
|
||||
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
|
||||
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</CardBody>
|
||||
@ -1051,9 +1064,9 @@ class Forms extends Component {
|
||||
<CardHeader>
|
||||
<i className="fa fa-edit"></i>Form Elements
|
||||
<div className="card-header-actions">
|
||||
<a href="#" className="card-header-action 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 href="#" className="card-header-action btn-close"><i className="icon-close"></i></a>
|
||||
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
|
||||
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
|
||||
<Button color="link" className="card-header-action btn-close"><i className="icon-close"></i></Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Collapse isOpen={this.state.collapse} id="collapseExample">
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
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 {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
||||
@ -28,6 +30,8 @@ class Jumbotrons extends Component {
|
||||
</Jumbotron>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
||||
@ -42,6 +46,8 @@ class Jumbotrons extends Component {
|
||||
</Jumbotron>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,25 @@
|
||||
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 {
|
||||
|
||||
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() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
@ -150,6 +167,57 @@ class ListGroups extends Component {
|
||||
</Card>
|
||||
</Col>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,35 +18,35 @@ class Paginations extends Component {
|
||||
<CardBody>
|
||||
<Pagination>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#" />
|
||||
<PaginationLink previous tag="button" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
4
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
5
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#" />
|
||||
<PaginationLink next tag="button" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
@ -59,35 +59,35 @@ class Paginations extends Component {
|
||||
<CardBody>
|
||||
<Pagination>
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink previous href="#" />
|
||||
<PaginationLink previous tag="button" />
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
4
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
5
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#" />
|
||||
<PaginationLink next tag="button" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
@ -100,71 +100,71 @@ class Paginations extends Component {
|
||||
<CardBody>
|
||||
<Pagination size="lg">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#" />
|
||||
<PaginationLink previous tag="button" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem className="d-none d-sm-block">
|
||||
<PaginationLink next href="#" />
|
||||
<PaginationLink next tag="button" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
<Pagination>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#" />
|
||||
<PaginationLink previous tag="button" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#" />
|
||||
<PaginationLink next tag="button" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
<Pagination size="sm">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#" />
|
||||
<PaginationLink previous tag="button" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
<PaginationLink tag="button">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#" />
|
||||
<PaginationLink next tag="button" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
|
||||
@ -66,22 +66,22 @@ class Tables extends Component {
|
||||
</Table>
|
||||
<Pagination>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#"></PaginationLink>
|
||||
<PaginationLink previous tag="button"></PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
<PaginationLink tag="button">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">2</PaginationLink>
|
||||
<PaginationLink tag="button">2</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">3</PaginationLink>
|
||||
<PaginationLink tag="button">3</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">4</PaginationLink>
|
||||
<PaginationLink tag="button">4</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#"></PaginationLink>
|
||||
<PaginationLink next tag="button"></PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
@ -147,14 +147,14 @@ class Tables extends Component {
|
||||
</tbody>
|
||||
</Table>
|
||||
<Pagination>
|
||||
<PaginationItem disabled><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem disabled><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
<PaginationLink tag="button">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -222,14 +222,14 @@ class Tables extends Component {
|
||||
</tbody>
|
||||
</Table>
|
||||
<Pagination>
|
||||
<PaginationItem><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
<PaginationLink tag="button">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -294,14 +294,14 @@ class Tables extends Component {
|
||||
</tbody>
|
||||
</Table>
|
||||
<Pagination>
|
||||
<PaginationItem><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
<PaginationLink tag="button">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem className="page-item"><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||
<PaginationItem className="page-item"><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -370,14 +370,14 @@ class Tables extends Component {
|
||||
</Table>
|
||||
<nav>
|
||||
<Pagination>
|
||||
<PaginationItem><PaginationLink previous href="#">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
<PaginationLink tag="button">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
|
||||
<PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
|
||||
</Pagination>
|
||||
</nav>
|
||||
</CardBody>
|
||||
|
||||
@ -21,89 +21,89 @@ class BrandButtons extends Component {
|
||||
<small> Add this class <code>.btn-sm</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<Button size="sm" className="btn-facebook btn-brand"><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-linkedin btn-brand"><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-tumblr btn-brand"><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-github btn-brand"><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-openid btn-brand"><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-css3 btn-brand"><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-dribbble btn-brand"><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-instagram btn-brand"><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-vk btn-brand"><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-behance btn-brand"><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-reddit btn-brand"><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-vine btn-brand"><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-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</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 mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</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 mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</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 mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</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 mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</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 mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</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 mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</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 mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</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 mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</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 mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</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 mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</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 mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</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 mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</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>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<Button className="btn-facebook btn-brand"><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-linkedin btn-brand"><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-tumblr btn-brand"><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-github btn-brand"><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-openid btn-brand"><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-css3 btn-brand"><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-dribbble btn-brand"><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-instagram btn-brand"><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-vk btn-brand"><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-behance btn-brand"><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-reddit btn-brand"><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-vine btn-brand"><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-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</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 mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</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 mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</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 mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</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 mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</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 mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</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 mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</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 mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</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 mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</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 mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</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 mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</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 mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</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 mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
|
||||
<Button className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small> Add this class <code>.btn-lg</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<Button size="lg" className="btn-facebook btn-brand"><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-linkedin btn-brand"><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-tumblr btn-brand"><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-github btn-brand"><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-openid btn-brand"><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-css3 btn-brand"><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-dribbble btn-brand"><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-instagram btn-brand"><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-vk btn-brand"><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-behance btn-brand"><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-reddit btn-brand"><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-vine btn-brand"><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-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</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 mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</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 mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</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 mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</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 mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</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 mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</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 mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</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 mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</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 mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</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 mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</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 mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</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 mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</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 mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</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>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -124,89 +124,89 @@ class BrandButtons extends Component {
|
||||
<small> Add this class <code>.btn-sm</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<Button size="sm" className="btn-facebook btn-brand icon"><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-linkedin btn-brand icon"><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-tumblr btn-brand icon"><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-github btn-brand icon"><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-openid btn-brand icon"><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-css3 btn-brand icon"><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-dribbble btn-brand icon"><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-instagram btn-brand icon"><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-vk btn-brand icon"><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-behance btn-brand icon"><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-reddit btn-brand icon"><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-vine btn-brand icon"><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-vimeo btn-brand icon"><i className="fa fa-vimeo"></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 mr-1 mb-1"><i className="fa fa-twitter"></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 mr-1 mb-1"><i className="fa fa-flickr"></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 mr-1 mb-1"><i className="fa fa-xing"></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 mr-1 mb-1"><i className="fa fa-html5"></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 mr-1 mb-1"><i className="fa fa-stack-overflow"></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 mr-1 mb-1"><i className="fa fa-youtube"></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 mr-1 mb-1"><i className="fa fa-google-plus"></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 mr-1 mb-1"><i className="fa fa-pinterest"></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 mr-1 mb-1"><i className="fa fa-yahoo"></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 mr-1 mb-1"><i className="fa fa-dropbox"></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 mr-1 mb-1"><i className="fa fa-spotify"></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 mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
|
||||
<Button size="sm" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
|
||||
<Button className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
|
||||
<Button className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
|
||||
<Button className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
|
||||
<Button className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
|
||||
<Button className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
|
||||
<Button className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
|
||||
<Button className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
|
||||
<Button className="btn-openid btn-brand icon"><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-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
|
||||
<Button className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
|
||||
<Button className="btn-dribbble btn-brand icon"><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-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
|
||||
<Button className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
|
||||
<Button className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
|
||||
<Button className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
|
||||
<Button className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
|
||||
<Button className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
|
||||
<Button className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
|
||||
<Button className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
|
||||
<Button className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
|
||||
<Button className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
|
||||
<Button className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></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 mr-1 mb-1"><i className="fa fa-twitter"></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 mr-1 mb-1"><i className="fa fa-flickr"></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 mr-1 mb-1"><i className="fa fa-xing"></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 mr-1 mb-1"><i className="fa fa-html5"></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 mr-1 mb-1"><i className="fa fa-stack-overflow"></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 mr-1 mb-1"><i className="fa fa-youtube"></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 mr-1 mb-1"><i className="fa fa-google-plus"></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 mr-1 mb-1"><i className="fa fa-pinterest"></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 mr-1 mb-1"><i className="fa fa-yahoo"></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 mr-1 mb-1"><i className="fa fa-dropbox"></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 mr-1 mb-1"><i className="fa fa-spotify"></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 mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
|
||||
<Button className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small> Add this class <code>.btn-lg</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<Button size="lg" className="btn-facebook btn-brand icon"><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-linkedin btn-brand icon"><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-tumblr btn-brand icon"><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-github btn-brand icon"><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-openid btn-brand icon"><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-css3 btn-brand icon"><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-dribbble btn-brand icon"><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-instagram btn-brand icon"><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-vk btn-brand icon"><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-behance btn-brand icon"><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-reddit btn-brand icon"><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-vine btn-brand icon"><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-vimeo btn-brand icon"><i className="fa fa-vimeo"></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 mr-1 mb-1"><i className="fa fa-twitter"></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 mr-1 mb-1"><i className="fa fa-flickr"></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 mr-1 mb-1"><i className="fa fa-xing"></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 mr-1 mb-1"><i className="fa fa-html5"></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 mr-1 mb-1"><i className="fa fa-stack-overflow"></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 mr-1 mb-1"><i className="fa fa-youtube"></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 mr-1 mb-1"><i className="fa fa-google-plus"></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 mr-1 mb-1"><i className="fa fa-pinterest"></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 mr-1 mb-1"><i className="fa fa-yahoo"></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 mr-1 mb-1"><i className="fa fa-dropbox"></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 mr-1 mb-1"><i className="fa fa-spotify"></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 mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
|
||||
<Button size="lg" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -227,89 +227,89 @@ class BrandButtons extends Component {
|
||||
<small> Add this class <code>.btn-sm</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<Button size="sm" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
|
||||
<Button size="sm" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
|
||||
<Button size="sm" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
|
||||
<Button size="sm" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
|
||||
<Button size="sm" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
|
||||
<Button size="sm" className="btn-xing btn-brand text"><span>Xing</span></Button>
|
||||
<Button size="sm" className="btn-github btn-brand text"><span>Github</span></Button>
|
||||
<Button size="sm" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
|
||||
<Button size="sm" className="btn-openid btn-brand text"><span>OpenID</span></Button>
|
||||
<Button size="sm" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
|
||||
<Button size="sm" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
|
||||
<Button size="sm" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
|
||||
<Button size="sm" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
|
||||
<Button size="sm" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
|
||||
<Button size="sm" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
|
||||
<Button size="sm" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
|
||||
<Button size="sm" className="btn-vk btn-brand text"><span>VK</span></Button>
|
||||
<Button size="sm" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
|
||||
<Button size="sm" className="btn-behance btn-brand text"><span>Behance</span></Button>
|
||||
<Button size="sm" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
|
||||
<Button size="sm" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
|
||||
<Button size="sm" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
|
||||
<Button size="sm" className="btn-vine btn-brand text"><span>Vine</span></Button>
|
||||
<Button size="sm" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
|
||||
<Button size="sm" className="btn-vimeo btn-brand text"><span>Vimeo</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 mr-1 mb-1"><span>Twitter</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 mr-1 mb-1"><span>Flickr</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 mr-1 mb-1"><span>Xing</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 mr-1 mb-1"><span>HTML5</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 mr-1 mb-1"><span>StackOverflow</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 mr-1 mb-1"><span>YouTube</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 mr-1 mb-1"><span>Google+</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 mr-1 mb-1"><span>Pinterest</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 mr-1 mb-1"><span>Yahoo</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 mr-1 mb-1"><span>Dropbox</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 mr-1 mb-1"><span>Spotify</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 mr-1 mb-1"><span>Forsquare</span></Button>
|
||||
<Button size="sm" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>
|
||||
<Button className="btn-twitter btn-brand text"><span>Twitter</span></Button>
|
||||
<Button className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
|
||||
<Button className="btn-flickr btn-brand text"><span>Flickr</span></Button>
|
||||
<Button className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
|
||||
<Button className="btn-xing btn-brand text"><span>Xing</span></Button>
|
||||
<Button className="btn-github btn-brand text"><span>Github</span></Button>
|
||||
<Button className="btn-html5 btn-brand text"><span>HTML5</span></Button>
|
||||
<Button className="btn-openid btn-brand text"><span>OpenID</span></Button>
|
||||
<Button className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
|
||||
<Button className="btn-css3 btn-brand text"><span>CSS3</span></Button>
|
||||
<Button className="btn-youtube btn-brand text"><span>YouTube</span></Button>
|
||||
<Button className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
|
||||
<Button className="btn-google-plus btn-brand text"><span>Google+</span></Button>
|
||||
<Button className="btn-instagram btn-brand text"><span>Instagram</span></Button>
|
||||
<Button className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
|
||||
<Button className="btn-vk btn-brand text"><span>VK</span></Button>
|
||||
<Button className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
|
||||
<Button className="btn-behance btn-brand text"><span>Behance</span></Button>
|
||||
<Button className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
|
||||
<Button className="btn-reddit btn-brand text"><span>Reddit</span></Button>
|
||||
<Button className="btn-spotify btn-brand text"><span>Spotify</span></Button>
|
||||
<Button className="btn-vine btn-brand text"><span>Vine</span></Button>
|
||||
<Button className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
|
||||
<Button className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
|
||||
<Button className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
|
||||
<Button className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
|
||||
<Button className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
|
||||
<Button className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
|
||||
<Button className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
|
||||
<Button className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
|
||||
<Button className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
|
||||
<Button className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</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 mr-1 mb-1"><span>StackOverflow</span></Button>
|
||||
<Button className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
|
||||
<Button className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</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 mr-1 mb-1"><span>Google+</span></Button>
|
||||
<Button className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
|
||||
<Button className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
|
||||
<Button className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
|
||||
<Button className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
|
||||
<Button className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
|
||||
<Button className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
|
||||
<Button className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
|
||||
<Button className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
|
||||
<Button className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
|
||||
<Button className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
|
||||
<Button className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small> Add this class <code>.btn-lg</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<Button size="lg" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
|
||||
<Button size="lg" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
|
||||
<Button size="lg" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
|
||||
<Button size="lg" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
|
||||
<Button size="lg" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
|
||||
<Button size="lg" className="btn-xing btn-brand text"><span>Xing</span></Button>
|
||||
<Button size="lg" className="btn-github btn-brand text"><span>Github</span></Button>
|
||||
<Button size="lg" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
|
||||
<Button size="lg" className="btn-openid btn-brand text"><span>OpenID</span></Button>
|
||||
<Button size="lg" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
|
||||
<Button size="lg" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
|
||||
<Button size="lg" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
|
||||
<Button size="lg" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
|
||||
<Button size="lg" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
|
||||
<Button size="lg" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
|
||||
<Button size="lg" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
|
||||
<Button size="lg" className="btn-vk btn-brand text"><span>VK</span></Button>
|
||||
<Button size="lg" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
|
||||
<Button size="lg" className="btn-behance btn-brand text"><span>Behance</span></Button>
|
||||
<Button size="lg" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
|
||||
<Button size="lg" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
|
||||
<Button size="lg" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
|
||||
<Button size="lg" className="btn-vine btn-brand text"><span>Vine</span></Button>
|
||||
<Button size="lg" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
|
||||
<Button size="lg" className="btn-vimeo btn-brand text"><span>Vimeo</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 mr-1 mb-1"><span>Twitter</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 mr-1 mb-1"><span>Flickr</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 mr-1 mb-1"><span>Xing</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 mr-1 mb-1"><span>HTML5</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 mr-1 mb-1"><span>StackOverflow</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 mr-1 mb-1"><span>YouTube</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 mr-1 mb-1"><span>Google+</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 mr-1 mb-1"><span>Pinterest</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 mr-1 mb-1"><span>Yahoo</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 mr-1 mb-1"><span>Dropbox</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 mr-1 mb-1"><span>Spotify</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 mr-1 mb-1"><span>Forsquare</span></Button>
|
||||
<Button size="lg" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@ -40,7 +40,7 @@ class ButtonGroups extends Component {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<Col md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
|
||||
@ -58,6 +58,26 @@ class ButtonGroups extends Component {
|
||||
</ButtonGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Vertical variation</strong>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ButtonGroup vertical>
|
||||
<Button>1</Button>
|
||||
<Button>2</Button>
|
||||
<ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
|
||||
<DropdownToggle caret>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem>Dropdown Link</DropdownItem>
|
||||
<DropdownItem>Dropdown Link</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
</ButtonGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
|
||||
@ -81,38 +101,8 @@ class ButtonGroups extends Component {
|
||||
</ButtonToolbar>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<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>
|
||||
</Col>
|
||||
<Col md={6}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Sizing</strong>
|
||||
@ -157,24 +147,39 @@ class ButtonGroups extends Component {
|
||||
</ButtonGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<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>
|
||||
<CardBody>
|
||||
<ButtonGroup vertical>
|
||||
<ButtonToolbar className="mb-3">
|
||||
<ButtonGroup className="mr-2">
|
||||
<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>
|
||||
<Button>3</Button>
|
||||
<Button>4</Button>
|
||||
</ButtonGroup>
|
||||
<InputGroup>
|
||||
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
|
||||
<Input placeholder="Input group example" />
|
||||
</InputGroup>
|
||||
</ButtonToolbar>
|
||||
<ButtonToolbar className="justify-content-between">
|
||||
<ButtonGroup>
|
||||
<Button>1</Button>
|
||||
<Button>2</Button>
|
||||
<Button>3</Button>
|
||||
<Button>4</Button>
|
||||
</ButtonGroup>
|
||||
<InputGroup>
|
||||
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
|
||||
<Input placeholder="Input group example" />
|
||||
</InputGroup>
|
||||
</ButtonToolbar>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@ -5,6 +5,627 @@ class Buttons extends Component {
|
||||
render() {
|
||||
return (
|
||||
<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>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
@ -36,9 +657,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class <code>.btn-lg</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add this class <code>.btn-lg</code></p>
|
||||
<Button color="primary" size="lg">Primary</Button>
|
||||
<Button color="secondary" size="lg">Secondary</Button>
|
||||
<Button color="success" size="lg">Success</Button>
|
||||
@ -51,9 +672,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class <code>.btn-sm</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.btn-sm</code></p>
|
||||
<Button color="primary" size="sm">Primary</Button>
|
||||
<Button color="secondary" size="sm">Secondary</Button>
|
||||
<Button color="success" size="sm">Success</Button>
|
||||
@ -66,9 +687,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this <code>disabled="disabled"</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add <code>disabled="disabled"</code></p>
|
||||
<Button color="primary" disabled>Primary</Button>
|
||||
<Button color="secondary" disabled>Secondary</Button>
|
||||
<Button color="success" disabled>Success</Button>
|
||||
@ -81,9 +702,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class <code>.active</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.active</code></p>
|
||||
<Button color="primary" active>Primary</Button>
|
||||
<Button color="secondary" active>Secondary</Button>
|
||||
<Button color="success" active>Success</Button>
|
||||
@ -96,9 +717,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class <code>.btn-block</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.btn-block</code></p>
|
||||
<Button color="secondary" 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>
|
||||
@ -137,9 +758,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class <code>.btn-lg</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.btn-lg</code></p>
|
||||
<Button outline color="primary" size="lg">Primary</Button>
|
||||
<Button outline color="secondary" size="lg">Secondary</Button>
|
||||
<Button outline color="success" size="lg">Success</Button>
|
||||
@ -151,9 +772,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class <code>.btn-sm</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.btn-sm</code></p>
|
||||
<Button outline color="primary" size="sm">Primary</Button>
|
||||
<Button outline color="secondary" size="sm">Secondary</Button>
|
||||
<Button outline color="success" size="sm">Success</Button>
|
||||
@ -165,9 +786,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this <code>disabled="disabled"</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add <code>disabled="disabled"</code></p>
|
||||
<Button outline color="primary" disabled>Primary</Button>
|
||||
<Button outline color="secondary" disabled>Secondary</Button>
|
||||
<Button color="success" disabled>Success</Button>
|
||||
@ -179,9 +800,9 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class <code>.active</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.active</code></p>
|
||||
<Button outline color="primary" active>Primary</Button>
|
||||
<Button outline color="secondary" active>Secondary</Button>
|
||||
<Button outline color="success" active>Success</Button>
|
||||
@ -193,9 +814,10 @@ class Buttons extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class <code>.btn-block</code></small>
|
||||
{/*<small>Add this class <code>.btn-block</code></small>*/}
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Add class <code>.btn-block</code></p>
|
||||
<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="success" size="lg" block>Block level button</Button>
|
||||
|
||||
@ -26,7 +26,7 @@ class Badges extends Component {
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button color="primary" outline>
|
||||
Notifications <Badge color="secondary" style={{ position: 'static' }}>4</Badge>
|
||||
Notifications <Badge color="secondary" pill style={{ position: 'static' }}>9</Badge>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
@ -34,8 +34,7 @@ class Badges extends Component {
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Badges</strong>
|
||||
<small>contextual variations</small>
|
||||
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Badge className="mr-1" color="primary">Primary</Badge>
|
||||
@ -50,8 +49,7 @@ class Badges extends Component {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Badges</strong>
|
||||
<small>pill badges</small>
|
||||
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Badge className="mr-1" color="primary" pill>Primary</Badge>
|
||||
@ -66,8 +64,7 @@ class Badges extends Component {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Badges</strong>
|
||||
<small>links</small>
|
||||
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Badge className="mr-1" href="#" color="primary">Primary</Badge>
|
||||
|
||||
@ -2,13 +2,26 @@ import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import classNames from 'classnames';
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
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 color = window.getComputedStyle(elem).getPropertyValue('background-color')
|
||||
this.setState({
|
||||
bgColor: color
|
||||
bgColor: color || this.state.bgColor
|
||||
})
|
||||
}
|
||||
|
||||
@ -40,12 +53,13 @@ class ThemeView extends Component {
|
||||
}
|
||||
|
||||
class ThemeColor extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// }
|
||||
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')
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user