Initial CoreUI commit
The initial new codebase from a template
This commit is contained in:
piratefinn
parent
39f90b1897
commit
6f084171dd
511 changed files with 27578 additions and 1649 deletions
942
src/app/components/switches.component.html
Normal file
942
src/app/components/switches.component.html
Normal file
|
|
@ -0,0 +1,942 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
3d Switch
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Sizes
|
||||
</div>
|
||||
<div class="card-block p-0">
|
||||
<table class="table table-hover table-striped table-align-middle mb-0">
|
||||
<thead>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-lg switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-lg</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-sm switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Extra small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-xs switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
Reference in a new issue