1
0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00

custom form elements

This commit is contained in:
chomik
2019-05-20 23:38:12 +02:00
parent 7389d5bbca
commit a0e91635c7
5 changed files with 1345 additions and 114 deletions
+4 -12
View File
@@ -122,14 +122,7 @@
</div>
<div class="form-group">
<label class="form-label">Ratios</label>
<div class="row align-items-center">
<div class="col">
<input type="range" class="form-control custom-range" step="5" min="0" max="50">
</div>
<div class="col-auto">
<input type="number" class="form-control w-8" value="45">
</div>
</div>
<input type="range" class="custom-range" step="5" min="0" max="50">
</div>
<div class="form-group">
<label class="form-label">Size</label>
@@ -259,10 +252,9 @@
<div class="form-group">
<div class="form-label">Toggle switch single</div>
<label class="custom-switch">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">I agree with terms and conditions</span>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">I agree with terms and conditions</div>
</label>
</div>
+13 -19
View File
@@ -1,21 +1,15 @@
<div class="form-group">
<div class="form-label">Toggle switches</div>
<div class="custom-switches-stacked">
<label class="custom-switch">
<input type="radio" name="option" value="1" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 1</span>
</label>
<label class="custom-switch">
<input type="radio" name="option" value="2" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 2</span>
</label>
<label class="custom-switch">
<input type="radio" name="option" value="3" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Option 3</span>
</label>
</div>
</div>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">Option 1</div>
</label>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">Option 2</div>
</label>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">Option 3</div>
</label>
</div>