Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

new form controls updated to newest bootstrap

Browse Source
This commit is contained in:
codecalm
2019-09-25 20:55:11 +02:00
parent 38d901e8af
commit 6ca4337ecd
38 changed files with 807 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/parts/input-checkboxes-inline.html
+8
View File
@@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">Inline Checkboxes</div>
<div>
{% include ui/form/check.html inline=true title="Option 1" type="checkbox" %}
{% include ui/form/check.html inline=true title="Option 2" type="checkbox" disabled=true %}
{% include ui/form/check.html inline=true title="Option 3" type="checkbox" checked=true %}
</div>
</div>
pages/_includes/parts/input-checkboxes.html
+8
View File
@@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">Checkboxes</div>
<div>
{% include ui/form/check.html type="checkbox" %}
{% include ui/form/check.html type="checkbox" disabled=true %}
{% include ui/form/check.html type="checkbox" checked=true %}
</div>
</div>
pages/_includes/parts/input-colorpicker.html
+4
View File
@@ -0,0 +1,4 @@
<div class="mb-3">
<label class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" value="{{ include.color | default: site.colors.blue.hex }}" title="Choose your color">
</div>
pages/_includes/parts/input-datalist.html
+9
View File
@@ -0,0 +1,9 @@
<div class="mb-3">
<label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." />
<datalist id="datalistOptions">
{% for country in site.data.countries %}
<option value="{{ country | escape }}">
{% endfor %}
</datalist>
</div>
pages/_includes/parts/input-file.html
+10
View File
@@ -0,0 +1,10 @@
<div class="mb-3">
<div class="form-label">{{ include.label | default: 'Custom File Input' }}</div>
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
</div>
pages/_includes/parts/input-image.html
+3 -3
View File
@@ -1,14 +1,14 @@
{% assign limit = include.limit | default: 6 %}
<div class="mb-2">
<div class="mb-3">
<label class="form-label">Image Check</label>
<div class="row row-xs">
{% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} />
<div class="imagecheck-figure">
<span class="imagecheck-figure">
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
</div>
</span>
</label>
</div>
{% endfor %}
pages/_includes/parts/input-radios-inline.html
+8
View File
@@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">Inline Radios</div>
<div>
{% include ui/form/check.html title="Option 1" type="radio" inline=true checked=true %}
{% include ui/form/check.html title="Option 2" type="radio" inline=true %}
{% include ui/form/check.html title="Option 3" type="radio" inline=true disabled=true %}
</div>
</div>
pages/_includes/parts/input-radios.html
+9
View File
@@ -0,0 +1,9 @@
<div class="mb-3">
<div class="form-label">Radios</div>
<div>
{% include ui/form/check.html title="Option 1" type="radio" checked=true %}
{% include ui/form/check.html title="Option 2" type="radio" %}
{% include ui/form/check.html title="Option 3" type="radio" disabled=true %}
{% include ui/form/check.html title="Option 4" type="radio" disabled=true checked=true %}
</div>
</div>
pages/_includes/parts/input-range.html
+4
View File
@@ -0,0 +1,4 @@
<div class="mb-3">
<label class="form-label">Range input</label>
<input type="range" class="form-range" min="0" max="10" step="1">
</div>
pages/_includes/parts/input-selectgroups.html
+18
View File
@@ -0,0 +1,18 @@
<div class="mb-3">
<label class="form-label">Shipping methods</label>
{% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
</div>
<div class="mb-3">
<label class="form-label">Icons input</label>
{% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div>
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
</div>
<div class="mb-3">
<label class="form-label">Your skills</label>
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
</div>
pages/_includes/parts/input-sizes.html
+6
View File
@@ -0,0 +1,6 @@
<div class="mb-3">
<label class="form-label">Input sizing</label>
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
<input class="form-control mb-2" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
pages/_includes/parts/input-toggle-single.html
+4
View File
@@ -0,0 +1,4 @@
<div class="mb-3">
<div class="form-label">Single switch</div>
{% include ui/form/check.html switch=true title="I agree with terms and conditions" %}
</div>
pages/_includes/parts/input-toggle.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="mb-2">
<div class="mb-3">
<div class="form-label">Toggle switches</div>
{% include ui/form/check.html switch=true title="Option 1" checked=true %}
{% include ui/form/check.html switch=true title="Option 2" %}
pages/_includes/parts/select.html
+8
View File
@@ -0,0 +1,8 @@
<div class="mb-3">
<div class="form-label">{{ include.label | default: 'Select' }}</div>
<select class="form-select"{% if include.multiple %} multiple{% endif %}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>