mirror of
https://github.com/tabler/tabler.git
synced 2026-08-16 08:12:22 +04:00
new form controls updated to newest bootstrap
This commit is contained in:
codecalm
@@ -6,10 +6,13 @@
|
||||
<label class="form-label">Text</label>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Readonly</label>
|
||||
@@ -21,9 +24,8 @@
|
||||
<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 %}
|
||||
{% include parts/select.html %}
|
||||
{% include parts/select.html label="Select multiple" multiple=true %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
|
||||
@@ -1,55 +1,79 @@
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<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">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<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">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option value="">Germany</option>
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<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="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Ratios</label>
|
||||
<input type="range" class="form-range" step="5" min="0" max="50">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Size</label>
|
||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||
</div>
|
||||
<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" %}
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-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="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" %}
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-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 class="mb-3">
|
||||
<label class="form-label">Your skills</label>
|
||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,162 +1,36 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Radios</div>
|
||||
<div>
|
||||
{% include ui/form/check.html title="Option 1" type="radio" %}
|
||||
{% include ui/form/check.html title="Option 2" type="radio" %}
|
||||
{% include ui/form/check.html title="Option 3" type="radio" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include parts/input-image.html %}
|
||||
{% include parts/input-color.html %}
|
||||
{% include parts/input-colorpicker.html %}
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div>
|
||||
{% include ui/form/check.html title="Option 1" type="radio" inline=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 %}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
{% include parts/input-toggle.html %}
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Toggle switch single</div>
|
||||
{% include ui/form/check.html title="I agree with terms and conditions" switch=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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="mb-3">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-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-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-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="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
<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="mb-3">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
<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="mb-3">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<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="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-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>
|
||||
<label class="form-label">Size</label>
|
||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-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>
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,53 @@
|
||||
{% include parts/input-radios.html %}
|
||||
{% include parts/input-radios-inline.html %}
|
||||
|
||||
{% include parts/input-checkboxes.html %}
|
||||
{% include parts/input-checkboxes-inline.html %}
|
||||
|
||||
{% include parts/input-toggle.html %}
|
||||
{% include parts/input-toggle-single.html %}
|
||||
|
||||
{% include parts/input-file.html %}
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-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-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-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="mb-3">
|
||||
<label class="form-label">Text mask</label>
|
||||
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
6
|
||||
{% include parts/input-selectgroups.html %}
|
||||
{% include parts/input-datalist.html %}
|
||||
{% include parts/input-sizes.html %}
|
||||
{% include parts/input-range.html %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Progress</label>
|
||||
{% include ui/progress.html %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user