gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Switches): move to AppSwitch component

Browse Source
This commit is contained in:
xidedix 2018-04-19 18:42:09 +02:00
parent fbad174a3c
commit c1bd2169aa
3 changed files with 338 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/containers/Full/FullAside.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap'; import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { AppSwitch } from '@coreui/react'
const propTypes = { const propTypes = {
children: PropTypes.node, children: PropTypes.node,
@ -239,11 +240,7 @@ class FullAside extends Component {
<div className="aside-options"> <div className="aside-options">
<div className="clearfix mt-4"> <div className="clearfix mt-4">
<small><b>Option 1</b></small> <small><b>Option 1</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</div> </div>
<div> <div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@ -255,11 +252,7 @@ class FullAside extends Component {
<div className="aside-options"> <div className="aside-options">
<div className="clearfix mt-3"> <div className="clearfix mt-3">
<small><b>Option 2</b></small> <small><b>Option 2</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
<Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</div> </div>
<div> <div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@ -271,22 +264,17 @@ class FullAside extends Component {
<div className="aside-options"> <div className="aside-options">
<div className="clearfix mt-3"> <div className="clearfix mt-3">
<small><b>Option 3</b></small> <small><b>Option 3</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
<Input type="checkbox" className="switch-input" /> <div>
<span className="switch-label" data-on="On" data-off="Off"></span> <small className="text-muted">Option disabled.</small>
<span className="switch-handle"></span> </div>
</Label>
</div> </div>
</div> </div>
<div className="aside-options"> <div className="aside-options">
<div className="clearfix mt-3"> <div className="clearfix mt-3">
<small><b>Option 4</b></small> <small><b>Option 4</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</div> </div>
</div> </div>

7
src/views/Base/Cards/Cards.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap'; import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
import { AppSwitch } from '@coreui/react'
class Cards extends Component { class Cards extends Component {
constructor(props) { constructor(props) {
@ -64,11 +65,7 @@ class Cards extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
Card with switch Card with switch
<Label className="switch switch-sm switch-text switch-info float-right mb-0"> <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
<Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

815
src/views/Base/Switches/Switches.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
import { AppSwitch } from '@coreui/react'
class Switches extends Component { class Switches extends Component {
render() { render() {
@ -7,137 +8,184 @@ class Switches extends Component {
<div className="animated fadeIn"> <div className="animated fadeIn">
<Row> <Row>
<Col xs="12"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
3d Switch 3d Switch
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-3d switch-primary"> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
</Label> <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
<Label className="switch switch-3d switch-secondary"> <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
<span className="switch-handle"></span> </CardBody>
</Label> </Card>
&nbsp;&nbsp;&nbsp; </Col>
<Label className="switch switch-3d switch-success"> <Col xs="12" md="6">
<Input type="checkbox" className="switch-input" defaultChecked /> <Card>
<span className="switch-label"></span> <CardHeader>
<span className="switch-handle"></span> 3d Switch <small><code>disabled</code></small>
</Label> </CardHeader>
&nbsp;&nbsp;&nbsp; <CardBody>
<Label className="switch switch-3d switch-warning"> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
</Label> <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
<Label className="switch switch-3d switch-info"> <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked outline={'alt'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} outline={'alt'} disabled />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>label</code></small>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline label</code></small>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline={'alt'} label</code></small>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline label</code></small>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
3d Switch <small><code>outline={'alt'} label</code></small>
</CardHeader>
<CardBody>
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label />
<AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label />
</CardBody>
</Card>
</Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch default Switch default
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-primary"> <AppSwitch className={'mx-1'} color={'primary'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'secondary'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} color={'success'} checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'warning'} checked />
</Label> <AppSwitch className={'mx-1'} color={'info'} checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'danger'} checked />
<Label className="switch switch-default switch-secondary"> <AppSwitch className={'mx-1'} color={'light'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'dark'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} color={'primary'} disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch default - pills Switch pills
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-pill switch-primary"> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
<Label className="switch switch-default switch-pill switch-secondary"> <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -148,131 +196,51 @@ class Switches extends Component {
Switch outline Switch outline
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-primary-outline"> <AppSwitch className={'mx-1'} color={'primary'} outline checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'secondary'} outline checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} color={'success'} outline checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'warning'} outline checked />
</Label> <AppSwitch className={'mx-1'} color={'info'} outline checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'danger'} outline checked />
<Label className="switch switch-default switch-secondary-outline"> <AppSwitch className={'mx-1'} color={'light'} outline checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'dark'} outline checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} color={'primary'} outline disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch outline - pills Switch outline pills
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline"> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
<Label className="switch switch-default switch-pill switch-secondary-outline"> <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch outline alternative Switch outline alternative
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-primary-outline-alt"> <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
</Label> <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
<Label className="switch switch-default switch-secondary-outline-alt"> <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -283,41 +251,15 @@ class Switches extends Component {
Switch outline alternative - pills Switch outline alternative - pills
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline-alt"> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
<Label className="switch switch-default switch-pill switch-secondary-outline-alt"> <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
<span className="switch-label"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -328,178 +270,105 @@ class Switches extends Component {
Switch with text Switch with text
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-primary"> <AppSwitch className={'mx-1'} color={'primary'} label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'secondary'} label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'success'} label checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'warning'} label checked />
</Label> <AppSwitch className={'mx-1'} color={'info'} label checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'danger'} label checked />
<Label className="switch switch-text switch-secondary"> <AppSwitch className={'mx-1'} color={'light'} label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'dark'} label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'primary'} label disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch with text - pills Switch with text pills
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-pill switch-primary"> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
<Label className="switch switch-text switch-pill switch-secondary"> <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch with text outline Switch with text outline
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<AppSwitch className={'mx-1'} color={'primary'} outline label checked />
<Label className="switch switch-text switch-primary-outline"> <AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'success'} outline label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'warning'} outline label checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'info'} outline label checked />
</Label> <AppSwitch className={'mx-1'} color={'danger'} outline label checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'light'} outline label checked />
<Label className="switch switch-text switch-secondary-outline"> <AppSwitch className={'mx-1'} color={'dark'} outline label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch with text outline - pills Switch with text outline pills
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
<Label className="switch switch-text switch-pill switch-primary-outline"> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
<Label className="switch switch-text switch-pill switch-secondary-outline"> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
<span className="switch-label" data-on="On" data-off="Off"></span> </CardBody>
<span className="switch-handle"></span> </Card>
</Label> </Col>
&nbsp;&nbsp;&nbsp; <Col xs="12" md="6">
<Label className="switch switch-text switch-pill switch-success-outline"> <Card>
<Input type="checkbox" className="switch-input" defaultChecked /> <CardHeader>
<span className="switch-label" data-on="On" data-off="Off"></span> Switch with text outline alternative pills
<span className="switch-handle"></span> </CardHeader>
</Label> <CardBody>
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
<Label className="switch switch-text switch-pill switch-warning-outline"> <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
</Label> <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
<Label className="switch switch-text switch-pill switch-info-outline"> <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
<span className="switch-label" data-on="On" data-off="Off"></span> </CardBody>
<span className="switch-handle"></span> </Card>
</Label> </Col>
&nbsp;&nbsp;&nbsp; <Col xs="12" md="6">
<Label className="switch switch-text switch-pill switch-danger-outline"> <Card>
<Input type="checkbox" className="switch-input" defaultChecked /> <CardHeader>
<span className="switch-label" data-on="On" data-off="Off"></span> Switch with text outline alternative pills
<span className="switch-handle"></span> </CardHeader>
</Label> <CardBody>
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} label checked />
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label disabled />
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -510,41 +379,33 @@ class Switches extends Component {
Switch with text outline alternative Switch with text outline alternative
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-primary-outline-alt"> <AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
</Label> <AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<Label className="switch switch-text switch-secondary-outline-alt"> <AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-handle"></span> </CardBody>
</Label> </Card>
&nbsp;&nbsp;&nbsp; </Col>
<Label className="switch switch-text switch-success-outline-alt"> <Col xs="12" md="6">
<Input type="checkbox" className="switch-input" defaultChecked /> <Card>
<span className="switch-label" data-on="On" data-off="Off"></span> <CardHeader>
<span className="switch-handle"></span> Switch with text outline alternative pills
</Label> </CardHeader>
&nbsp;&nbsp;&nbsp; <CardBody>
<Label className="switch switch-text switch-warning-outline-alt"> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<Label className="switch switch-text switch-info-outline-alt"> <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -552,44 +413,36 @@ class Switches extends Component {
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
Switch with text outline alternative - pills Switch with text outline alternative
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline-alt"> <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
</Label> <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<Label className="switch switch-text switch-pill switch-secondary-outline-alt"> <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-handle"></span> </CardBody>
</Label> </Card>
&nbsp;&nbsp;&nbsp; </Col>
<Label className="switch switch-text switch-pill switch-success-outline-alt"> <Col xs="12" md="6">
<Input type="checkbox" className="switch-input" defaultChecked /> <Card>
<span className="switch-label" data-on="On" data-off="Off"></span> <CardHeader>
<span className="switch-handle"></span> Switch with text outline alternative pills
</Label> </CardHeader>
&nbsp;&nbsp;&nbsp; <CardBody>
<Label className="switch switch-text switch-pill switch-warning-outline-alt"> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<span className="switch-handle"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
</Label> <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
&nbsp;&nbsp;&nbsp; <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<Label className="switch switch-text switch-pill switch-info-outline-alt"> <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<Input type="checkbox" className="switch-input" defaultChecked /> <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
<span className="switch-label" data-on="On" data-off="Off"></span> <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
@ -605,7 +458,7 @@ class Switches extends Component {
<tr> <tr>
<th>Size</th> <th>Size</th>
<th>Example</th> <th>Example</th>
<th>CSS Class</th> <th>Props</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -614,14 +467,10 @@ class Switches extends Component {
Large Large
</td> </td>
<td> <td>
<Label className="switch switch-lg switch-3d switch-primary"> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</td> </td>
<td> <td>
Add following class <code>.switch-lg</code> Add <code>size={'lg'}</code>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -629,11 +478,7 @@ class Switches extends Component {
Normal Normal
</td> </td>
<td> <td>
<Label className="switch switch-3d switch-primary"> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked />
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</td> </td>
<td> <td>
- -
@ -644,14 +489,10 @@ class Switches extends Component {
Small Small
</td> </td>
<td> <td>
<Label className="switch switch-sm switch-3d switch-primary"> <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</td> </td>
<td> <td>
Add following class <code>.switch-sm</code> Add <code>size={'sm'}</code>
</td> </td>
</tr> </tr>
</tbody> </tbody>