mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
form elements cleaning
This commit is contained in:
chomik
19
js/tabler.js
19
js/tabler.js
@@ -121,7 +121,6 @@ $(document).ready(function () {
|
|||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
var $elem = $('[data-toggle="autosize"]');
|
var $elem = $('[data-toggle="autosize"]');
|
||||||
console.log('$elem', $elem);
|
|
||||||
|
|
||||||
if ($elem) {
|
if ($elem) {
|
||||||
$elem.each(function() {
|
$elem.each(function() {
|
||||||
@@ -131,6 +130,24 @@ $(document).ready(function () {
|
|||||||
|
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Imask plugin
|
||||||
|
*/
|
||||||
|
if(window.IMask) {
|
||||||
|
(function() {
|
||||||
|
var $elem = $('[data-mask]');
|
||||||
|
|
||||||
|
if ($elem) {
|
||||||
|
$elem.each(function() {
|
||||||
|
IMask($(this).get(0), {
|
||||||
|
mask: $(this).attr('data-mask'),
|
||||||
|
lazy: $(this).attr('data-mask-visible') === 'true'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
window.tabler = tabler;
|
window.tabler = tabler;
|
||||||
|
|||||||
@@ -74,7 +74,8 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apexcharts": "3.6.2",
|
"apexcharts": "3.6.2",
|
||||||
|
"autosize": "4.0.2",
|
||||||
"bootstrap": "twbs/bootstrap#41fcd13",
|
"bootstrap": "twbs/bootstrap#41fcd13",
|
||||||
"autosize": "4.0.2"
|
"imask": "^5.1.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
- page: divider
|
- page: divider
|
||||||
- page: flags
|
- page: flags
|
||||||
- page: form-helpers
|
- page: form-helpers
|
||||||
|
- page: input-mask
|
||||||
- page: ribbons
|
- page: ribbons
|
||||||
- page: spinners
|
- page: spinners
|
||||||
- page: steps
|
- page: steps
|
||||||
|
|||||||
8
pages/_docs/input-mask.md
Normal file
8
pages/_docs/input-mask.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Input mask
|
||||||
|
---
|
||||||
|
|
||||||
|
{% example %}
|
||||||
|
<label class="form-label">Telephone mask</label>
|
||||||
|
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||||
|
{% endexample %}
|
||||||
@@ -4,380 +4,24 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-xl-4">
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<label class="form-label">Static</label>
|
<div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
|
||||||
<div class="form-control-plaintext">Username</div>
|
<div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Text</label>
|
|
||||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Disabled</label>
|
|
||||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
|
||||||
value="Well, she turned me into a newt." disabled>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Readonly</label>
|
|
||||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
|
||||||
value="Well, how'd you become king, then?" readonly>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
|
|
||||||
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% include parts/input-image.html %}
|
|
||||||
|
|
||||||
{% include parts/input-color.html %}
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Input group</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Search for…">
|
|
||||||
<span class="input-group-append">
|
|
||||||
<button class="btn btn-primary" type="button">Go!</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="col-xl-4">
|
||||||
<label class="form-label">Input group buttons</label>
|
<div class="row">
|
||||||
<div class="input-group">
|
<div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
|
||||||
<input type="text" class="form-control">
|
<div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
|
||||||
<div class="input-group-append">
|
|
||||||
<button type="button" class="btn btn-primary">Action</button>
|
|
||||||
<button data-toggle="dropdown" type="button"
|
|
||||||
class="btn btn-primary dropdown-toggle"></button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">
|
|
||||||
News
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">
|
|
||||||
Messages
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">
|
|
||||||
Edit Profile
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-xl-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
|
||||||
|
<div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include parts/input-icon.html %}
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Separated inputs</label>
|
|
||||||
<div class="row row-xs">
|
|
||||||
<div class="col">
|
|
||||||
<input type="text" class="form-control" placeholder="Search for…">
|
|
||||||
</div>
|
|
||||||
<span class="col-auto">
|
|
||||||
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">ZIP Code</label>
|
|
||||||
<div class="row row-sm">
|
|
||||||
<div class="col">
|
|
||||||
<input type="text" class="form-control" placeholder="Search for…">
|
|
||||||
</div>
|
|
||||||
<span class="col-auto align-self-center">
|
|
||||||
<span class="form-help" data-toggle="popover" data-placement="top"
|
|
||||||
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4">
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Password</label>
|
|
||||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Valid State</label>
|
|
||||||
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
|
||||||
placeholder="Valid State..">
|
|
||||||
|
|
||||||
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Invalid State</label>
|
|
||||||
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
|
||||||
placeholder="Invalid State..">
|
|
||||||
<div class="invalid-feedback">Invalid feedback</div>
|
|
||||||
|
|
||||||
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Country</label>
|
|
||||||
<select class="form-control custom-select">
|
|
||||||
<option value="">Germany</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Ratios</label>
|
|
||||||
<input type="range" class="custom-range" step="5" min="0" max="50">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Size</label>
|
|
||||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<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="form-group">
|
|
||||||
<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="form-group">
|
|
||||||
<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="form-group">
|
|
||||||
<label class="form-label">Your skills</label>
|
|
||||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% include parts/input-toggle.html %}
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label">Toggle switch single</div>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label">Radios</div>
|
|
||||||
<div class="custom-controls-stacked">
|
|
||||||
<label class="custom-control custom-radio">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-radios" value="option1"
|
|
||||||
checked>
|
|
||||||
<div class="custom-control-label">Option 1</div>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-radio">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-radios" value="option2">
|
|
||||||
<div class="custom-control-label">Option 2</div>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-radio">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-radios" value="option3"
|
|
||||||
disabled>
|
|
||||||
<div class="custom-control-label">Option Disabled</div>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-radio">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-radios2" value="option4"
|
|
||||||
disabled checked>
|
|
||||||
<div class="custom-control-label">Option Disabled Checked</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label">Inline Radios</div>
|
|
||||||
<div class="custom-controls-stacked">
|
|
||||||
<label class="custom-control custom-radio custom-control-inline">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
|
||||||
value="option1" checked>
|
|
||||||
<span class="custom-control-label">Option 1</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-radio custom-control-inline">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
|
||||||
value="option2">
|
|
||||||
<span class="custom-control-label">Option 2</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-radio custom-control-inline">
|
|
||||||
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
|
||||||
value="option3">
|
|
||||||
<span class="custom-control-label">Option 3</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label">Checkboxes</div>
|
|
||||||
<div class="custom-controls-stacked">
|
|
||||||
<label class="custom-control custom-checkbox">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1"
|
|
||||||
checked>
|
|
||||||
<span class="custom-control-label">Option 1</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-checkbox">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-checkbox2"
|
|
||||||
value="option2">
|
|
||||||
<span class="custom-control-label">Option 2</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-checkbox">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3"
|
|
||||||
disabled>
|
|
||||||
<span class="custom-control-label">Option Disabled</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-checkbox">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4"
|
|
||||||
checked disabled>
|
|
||||||
<span class="custom-control-label">Option Disabled Checked</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label">Inline Checkboxes</div>
|
|
||||||
<div>
|
|
||||||
<label class="custom-control custom-checkbox custom-control-inline">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1"
|
|
||||||
value="option1" checked>
|
|
||||||
<span class="custom-control-label">Option 1</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-checkbox custom-control-inline">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2"
|
|
||||||
value="option2">
|
|
||||||
<span class="custom-control-label">Option 2</span>
|
|
||||||
</label>
|
|
||||||
<label class="custom-control custom-checkbox custom-control-inline">
|
|
||||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3"
|
|
||||||
value="option3">
|
|
||||||
<span class="custom-control-label">Option 3</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-label">Bootstrap's Custom File Input</div>
|
|
||||||
<div class="custom-file">
|
|
||||||
<input type="file" class="custom-file-input" name="example-file-input-custom">
|
|
||||||
<label class="custom-file-label">Choose file</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Date of birth</label>
|
|
||||||
<div class="row row-xs">
|
|
||||||
<div class="col-5">
|
|
||||||
<select name="user[month]" class="form-control custom-select">
|
|
||||||
<option value="">Month</option>
|
|
||||||
<option value="1">January</option>
|
|
||||||
<option value="2">February</option>
|
|
||||||
<option value="3">March</option>
|
|
||||||
<option value="4">April</option>
|
|
||||||
<option value="5">May</option>
|
|
||||||
<option selected="selected" value="6">June</option>
|
|
||||||
<option value="7">July</option>
|
|
||||||
<option value="8">August</option>
|
|
||||||
<option value="9">September</option>
|
|
||||||
<option value="10">October</option>
|
|
||||||
<option value="11">November</option>
|
|
||||||
<option value="12">December</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<select name="user[day]" class="form-control custom-select">
|
|
||||||
<option value="">Day</option>
|
|
||||||
{% for i in (1..31) %}
|
|
||||||
<option value="{{ i }}"{% if i == 20 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-4">
|
|
||||||
<select name="user[year]" class="form-control custom-select">
|
|
||||||
<option value="">Year</option>
|
|
||||||
{% for i in (1897..2014) reversed %}
|
|
||||||
<option value="{{ i }}"{% if i == 1989 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Username</label>
|
|
||||||
{% include forms/input-group.html prepend="@" placeholder="username" %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Subdomain</label>
|
|
||||||
{% include forms/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Your vanity URL</label>
|
|
||||||
{% include forms/input-group.html prepend="https://example.com/users/" %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Price</label>
|
|
||||||
{% include forms/input-group.html prepend="$" append=".00" %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Button input</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<div class="input-group-prepend">
|
|
||||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
|
|
||||||
aria-haspopup="true" aria-expanded="false">
|
|
||||||
Action
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu">
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
|
||||||
<div role="separator" class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Tags</label>
|
|
||||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Beast</label>
|
|
||||||
<select name="beast" id="select-beast" class="form-control custom-select">
|
|
||||||
<option value="1">Chuck Testa</option>
|
|
||||||
<option value="4">Sage Cattabriga-Alosa</option>
|
|
||||||
<option value="3">Nikola Tesla</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Users list</label>
|
|
||||||
<select name="user" id="select-users" class="form-control custom-select">
|
|
||||||
{% for user in site.data.people limit: 10 %}
|
|
||||||
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
|
||||||
{{ user.first_name }} {{ user.last_name }}
|
|
||||||
</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Countries</label>
|
|
||||||
<select name="country" id="select-countries" class="form-control custom-select">
|
|
||||||
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
|
|
||||||
<option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
|
|
||||||
</option>
|
|
||||||
<option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
|
|
||||||
</option>
|
|
||||||
<option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-6">
|
|
||||||
{% include parts/form-fieldset.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer text-right">
|
<div class="card-footer text-right">
|
||||||
|
|||||||
85
pages/_includes/forms/form-elements-1.html
Normal file
85
pages/_includes/forms/form-elements-1.html
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Static</label>
|
||||||
|
<div class="form-control-plaintext">Username</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Text</label>
|
||||||
|
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Disabled</label>
|
||||||
|
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||||
|
value="Well, she turned me into a newt." disabled>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Readonly</label>
|
||||||
|
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||||
|
value="Well, how'd you become king, then?" readonly>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
|
||||||
|
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include parts/input-image.html %}
|
||||||
|
|
||||||
|
{% include parts/input-color.html %}
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Input group</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search for…">
|
||||||
|
<span class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Input group buttons</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-primary">Action</button>
|
||||||
|
<button data-toggle="dropdown" type="button"
|
||||||
|
class="btn btn-primary dropdown-toggle"></button>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">
|
||||||
|
News
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">
|
||||||
|
Edit Profile
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include parts/input-icon.html %}
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Separated inputs</label>
|
||||||
|
<div class="row row-xs">
|
||||||
|
<div class="col">
|
||||||
|
<input type="text" class="form-control" placeholder="Search for…">
|
||||||
|
</div>
|
||||||
|
<span class="col-auto">
|
||||||
|
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">ZIP Code</label>
|
||||||
|
<div class="row row-sm">
|
||||||
|
<div class="col">
|
||||||
|
<input type="text" class="form-control" placeholder="Search for…">
|
||||||
|
</div>
|
||||||
|
<span class="col-auto align-self-center">
|
||||||
|
<span class="form-help" data-toggle="popover" data-placement="top"
|
||||||
|
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
89
pages/_includes/forms/form-elements-2.html
Normal file
89
pages/_includes/forms/form-elements-2.html
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Password</label>
|
||||||
|
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Valid State</label>
|
||||||
|
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
||||||
|
placeholder="Valid State..">
|
||||||
|
|
||||||
|
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Invalid State</label>
|
||||||
|
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
||||||
|
placeholder="Invalid State..">
|
||||||
|
<div class="invalid-feedback">Invalid feedback</div>
|
||||||
|
|
||||||
|
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Country</label>
|
||||||
|
<select class="form-control custom-select">
|
||||||
|
<option value="">Germany</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Ratios</label>
|
||||||
|
<input type="range" class="custom-range" step="5" min="0" max="50">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Size</label>
|
||||||
|
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<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="form-group">
|
||||||
|
<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="form-group">
|
||||||
|
<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="form-group">
|
||||||
|
<label class="form-label">Your skills</label>
|
||||||
|
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include parts/input-toggle.html %}
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-label">Toggle switch single</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-label">Radios</div>
|
||||||
|
<div class="custom-controls-stacked">
|
||||||
|
<label class="custom-control custom-radio">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-radios" value="option1"
|
||||||
|
checked>
|
||||||
|
<div class="custom-control-label">Option 1</div>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-radio">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-radios" value="option2">
|
||||||
|
<div class="custom-control-label">Option 2</div>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-radio">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-radios" value="option3"
|
||||||
|
disabled>
|
||||||
|
<div class="custom-control-label">Option Disabled</div>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-radio">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-radios2" value="option4"
|
||||||
|
disabled checked>
|
||||||
|
<div class="custom-control-label">Option Disabled Checked</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
188
pages/_includes/forms/form-elements-3.html
Normal file
188
pages/_includes/forms/form-elements-3.html
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
<div class="form-group">
|
||||||
|
<div class="form-label">Inline Radios</div>
|
||||||
|
<div class="custom-controls-stacked">
|
||||||
|
<label class="custom-control custom-radio custom-control-inline">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
||||||
|
value="option1" checked>
|
||||||
|
<span class="custom-control-label">Option 1</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-radio custom-control-inline">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
||||||
|
value="option2">
|
||||||
|
<span class="custom-control-label">Option 2</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-radio custom-control-inline">
|
||||||
|
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
||||||
|
value="option3">
|
||||||
|
<span class="custom-control-label">Option 3</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-label">Checkboxes</div>
|
||||||
|
<div class="custom-controls-stacked">
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1"
|
||||||
|
checked>
|
||||||
|
<span class="custom-control-label">Option 1</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-checkbox2"
|
||||||
|
value="option2">
|
||||||
|
<span class="custom-control-label">Option 2</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3"
|
||||||
|
disabled>
|
||||||
|
<span class="custom-control-label">Option Disabled</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4"
|
||||||
|
checked disabled>
|
||||||
|
<span class="custom-control-label">Option Disabled Checked</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-label">Inline Checkboxes</div>
|
||||||
|
<div>
|
||||||
|
<label class="custom-control custom-checkbox custom-control-inline">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1"
|
||||||
|
value="option1" checked>
|
||||||
|
<span class="custom-control-label">Option 1</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-checkbox custom-control-inline">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2"
|
||||||
|
value="option2">
|
||||||
|
<span class="custom-control-label">Option 2</span>
|
||||||
|
</label>
|
||||||
|
<label class="custom-control custom-checkbox custom-control-inline">
|
||||||
|
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3"
|
||||||
|
value="option3">
|
||||||
|
<span class="custom-control-label">Option 3</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-label">Bootstrap's Custom File Input</div>
|
||||||
|
<div class="custom-file">
|
||||||
|
<input type="file" class="custom-file-input" name="example-file-input-custom">
|
||||||
|
<label class="custom-file-label">Choose file</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Date of birth</label>
|
||||||
|
<div class="row row-xs">
|
||||||
|
<div class="col-5">
|
||||||
|
<select name="user[month]" class="form-control custom-select">
|
||||||
|
<option value="">Month</option>
|
||||||
|
<option value="1">January</option>
|
||||||
|
<option value="2">February</option>
|
||||||
|
<option value="3">March</option>
|
||||||
|
<option value="4">April</option>
|
||||||
|
<option value="5">May</option>
|
||||||
|
<option selected="selected" value="6">June</option>
|
||||||
|
<option value="7">July</option>
|
||||||
|
<option value="8">August</option>
|
||||||
|
<option value="9">September</option>
|
||||||
|
<option value="10">October</option>
|
||||||
|
<option value="11">November</option>
|
||||||
|
<option value="12">December</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<select name="user[day]" class="form-control custom-select">
|
||||||
|
<option value="">Day</option>
|
||||||
|
{% for i in (1..31) %}
|
||||||
|
<option value="{{ i }}"{% if i == 20 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<select name="user[year]" class="form-control custom-select">
|
||||||
|
<option value="">Year</option>
|
||||||
|
{% for i in (1897..2014) reversed %}
|
||||||
|
<option value="{{ i }}"{% if i == 1989 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Username</label>
|
||||||
|
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Subdomain</label>
|
||||||
|
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Your vanity URL</label>
|
||||||
|
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Price</label>
|
||||||
|
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Button input</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
|
||||||
|
aria-haspopup="true" aria-expanded="false">
|
||||||
|
Action
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
||||||
|
<div role="separator" class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Tags</label>
|
||||||
|
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Beast</label>
|
||||||
|
<select name="beast" id="select-beast" class="form-control custom-select">
|
||||||
|
<option value="1">Chuck Testa</option>
|
||||||
|
<option value="4">Sage Cattabriga-Alosa</option>
|
||||||
|
<option value="3">Nikola Tesla</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Users list</label>
|
||||||
|
<select name="user" id="select-users" class="form-control custom-select">
|
||||||
|
{% for user in site.data.people limit: 10 %}
|
||||||
|
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
||||||
|
{{ user.first_name }} {{ user.last_name }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Countries</label>
|
||||||
|
<select name="country" id="select-countries" class="form-control custom-select">
|
||||||
|
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
|
||||||
|
<option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
|
||||||
|
</option>
|
||||||
|
<option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
|
||||||
|
</option>
|
||||||
|
<option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
10
pages/_includes/forms/form-elements-4.html
Normal file
10
pages/_includes/forms/form-elements-4.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{% include parts/form-fieldset.html %}
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Text mask</label>
|
||||||
|
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Telephone mask</label>
|
||||||
|
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||||
|
</div>
|
||||||
1
pages/_includes/forms/form-elements-5.html
Normal file
1
pages/_includes/forms/form-elements-5.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
5
|
||||||
1
pages/_includes/forms/form-elements-6.html
Normal file
1
pages/_includes/forms/form-elements-6.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
6
|
||||||
@@ -4,6 +4,7 @@
|
|||||||
<script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
|
<script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
|
||||||
<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
|
<script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
|
||||||
<script src="{{ site.base }}/libs/autosize/autosize.min.js"></script>
|
<script src="{{ site.base }}/libs/autosize/autosize.min.js"></script>
|
||||||
|
<script src="{{ site.base }}/libs/imask/imask.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<script src="{{ site.base }}/js/tabler.js"></script>
|
<script src="{{ site.base }}/js/tabler.js"></script>
|
||||||
|
|||||||
1
pages/_includes/ui/input-mask.html
Normal file
1
pages/_includes/ui/input-mask.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="00/00/0000"{% endif %} />
|
||||||
@@ -38,6 +38,7 @@ textarea {
|
|||||||
|
|
||||||
.form-fieldset {
|
.form-fieldset {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
background: $min-black;
|
background: $min-black;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
|||||||
2
static/libs/imask/imask.min.js
vendored
Normal file
2
static/libs/imask/imask.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
static/libs/imask/imask.min.js.map
Normal file
BIN
static/libs/imask/imask.min.js.map
Normal file
Binary file not shown.
Reference in New Issue
Block a user