refactor(Switches): move to AppSwitch component
This commit is contained in:
xidedix
parent
fbad174a3c
commit
c1bd2169aa
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
||||
import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { AppSwitch } from '@coreui/react'
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.node,
|
||||
@ -239,11 +240,7 @@ class FullAside extends Component {
|
||||
<div className="aside-options">
|
||||
<div className="clearfix mt-4">
|
||||
<small><b>Option 1</b></small>
|
||||
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
|
||||
</div>
|
||||
<div>
|
||||
<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="clearfix mt-3">
|
||||
<small><b>Option 2</b></small>
|
||||
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<Input type="checkbox" className="switch-input" />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
|
||||
</div>
|
||||
<div>
|
||||
<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="clearfix mt-3">
|
||||
<small><b>Option 3</b></small>
|
||||
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<Input type="checkbox" className="switch-input" />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
|
||||
<div>
|
||||
<small className="text-muted">Option disabled.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="aside-options">
|
||||
<div className="clearfix mt-3">
|
||||
<small><b>Option 4</b></small>
|
||||
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
|
||||
import { AppSwitch } from '@coreui/react'
|
||||
|
||||
class Cards extends Component {
|
||||
constructor(props) {
|
||||
@ -64,11 +65,7 @@ class Cards extends Component {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Card with switch
|
||||
<Label className="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<Input type="checkbox" className="switch-input" />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
|
||||
import { AppSwitch } from '@coreui/react'
|
||||
|
||||
class Switches extends Component {
|
||||
render() {
|
||||
@ -7,137 +8,184 @@ class Switches extends Component {
|
||||
<div className="animated fadeIn">
|
||||
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
3d Switch
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-3d switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-3d switch-secondary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-3d switch-success">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-3d switch-warning">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-3d switch-info">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</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">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch default
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-default switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-default switch-secondary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'success'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'warning'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'info'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'light'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'dark'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'primary'} disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch default - pills
|
||||
Switch pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-default switch-pill switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-default switch-pill switch-secondary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
@ -148,131 +196,51 @@ class Switches extends Component {
|
||||
Switch outline
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-default switch-primary-outline">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-default switch-secondary-outline">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'success'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'warning'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'info'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'light'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'dark'} outline checked />
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch outline - pills
|
||||
Switch outline pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-default switch-pill switch-primary-outline">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-default switch-pill switch-secondary-outline">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch outline alternative
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-default switch-primary-outline-alt">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-default switch-secondary-outline-alt">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
@ -283,41 +251,15 @@ class Switches extends Component {
|
||||
Switch outline alternative - pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-default switch-pill switch-primary-outline-alt">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-default switch-pill switch-secondary-outline-alt">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
@ -328,178 +270,105 @@ class Switches extends Component {
|
||||
Switch with text
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-text switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-text switch-secondary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'success'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'warning'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'info'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'light'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'dark'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'primary'} label disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text - pills
|
||||
Switch with text pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-text switch-pill switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-secondary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
|
||||
<Label className="switch switch-text switch-primary-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>
|
||||
|
||||
<Label className="switch switch-text switch-secondary-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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'success'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'warning'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'info'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'light'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'dark'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline - pills
|
||||
Switch with text outline pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-primary-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>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-secondary-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>
|
||||
|
||||
<Label className="switch switch-text switch-pill 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>
|
||||
|
||||
<Label className="switch switch-text switch-pill 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>
|
||||
|
||||
<Label className="switch switch-text switch-pill 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>
|
||||
|
||||
<Label className="switch switch-text switch-pill 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>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline alternative pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline alternative pills
|
||||
</CardHeader>
|
||||
<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>
|
||||
</Card>
|
||||
</Col>
|
||||
@ -510,41 +379,33 @@ class Switches extends Component {
|
||||
Switch with text outline alternative
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-text switch-primary-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>
|
||||
|
||||
<Label className="switch switch-text switch-secondary-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>
|
||||
|
||||
<Label className="switch switch-text switch-success-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>
|
||||
|
||||
<Label className="switch switch-text switch-warning-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>
|
||||
|
||||
<Label className="switch switch-text switch-info-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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline alternative pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
@ -552,44 +413,36 @@ class Switches extends Component {
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline alternative - pills
|
||||
Switch with text outline alternative
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Label className="switch switch-text switch-pill switch-primary-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>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-secondary-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>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-success-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>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-warning-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>
|
||||
|
||||
<Label className="switch switch-text switch-pill switch-info-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>
|
||||
|
||||
<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>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
<AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
Switch with text outline alternative pills
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
|
||||
<AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
@ -605,7 +458,7 @@ class Switches extends Component {
|
||||
<tr>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
<th>Props</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -614,14 +467,10 @@ class Switches extends Component {
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<Label className="switch switch-lg switch-3d switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
|
||||
</td>
|
||||
<td>
|
||||
Add following class <code>.switch-lg</code>
|
||||
Add <code>size={'lg'}</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -629,11 +478,7 @@ class Switches extends Component {
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<Label className="switch switch-3d switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked />
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
@ -644,14 +489,10 @@ class Switches extends Component {
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<Label className="switch switch-sm switch-3d switch-primary">
|
||||
<Input type="checkbox" className="switch-input" defaultChecked />
|
||||
<span className="switch-label"></span>
|
||||
<span className="switch-handle"></span>
|
||||
</Label>
|
||||
<AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
|
||||
</td>
|
||||
<td>
|
||||
Add following class <code>.switch-sm</code>
|
||||
Add <code>size={'sm'}</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user