Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-02 08:25:32 +04:00
Code Issues Projects Releases Wiki Activity

form inputs refactoring

Browse Source
This commit is contained in:
codecalm
2019-12-15 22:30:21 +01:00
parent 03ada7326c
commit 7079cf4711
16 changed files with 53 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_components/card-ribbon.html
+1 -1
View File
@@ -3,4 +3,4 @@ title: Card with ribbon
columns: 1
---
{% include cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
{% include_cached cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
pages/_docs/buttons.md
+3 -3
View File
@@ -290,13 +290,13 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar
{% include_cached ui/avatar.html person-id="4" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar
{% include_cached ui/avatar.html person-id="5" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar
{% include_cached ui/avatar.html person-id="6" %} Avatar
</a>
{% endexample %}
pages/_docs/form-elements.md
+4 -4
View File
@@ -174,22 +174,22 @@ bootstrap-link: components/forms/
{% example %}
<div class="mb-2">
<label class="form-label">Username</label>
{% include ui/input-group.html prepend="@" placeholder="username" %}
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
</div>
<div class="mb-2">
<label class="form-label">Subdomain</label>
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
</div>
<div class="mb-2">
<label class="form-label">Your vanity URL</label>
{% include ui/input-group.html prepend="https://example.com/users/" %}
{% include ui/form/input-group.html prepend="https://example.com/users/" %}
</div>
<div class="mb-2">
<label class="form-label">Price</label>
{% include ui/input-group.html prepend="$" append=".00" %}
{% include ui/form/input-group.html prepend="$" append=".00" %}
</div>
{% endexample %}
pages/_docs/input-mask.md
+1 -1
View File
@@ -4,5 +4,5 @@ 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 %}
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
{% endexample %}
pages/_docs/ribbons.md
+5 -5
View File
@@ -7,7 +7,7 @@ done: true
### Default markup
{% example html columns=1 %}
{% include cards/ribbon.html %}
{% include_cached cards/ribbon.html %}
{% endexample %}
### Ribbon position
@@ -22,7 +22,7 @@ You can easily change the position of a ribbon by adding a class to the element.
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% include_cached cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
@@ -30,7 +30,7 @@ You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbo
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% include_cached cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
@@ -38,7 +38,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
Set your own text in a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% include_cached cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
@@ -46,5 +46,5 @@ Set your own text in a ribbon.
Change the style of a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% include_cached cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
pages/_includes/forms/form-elements-2.html
+4 -4
View File
@@ -1,21 +1,21 @@
<div class="mb-3">
<label class="form-label">Username</label>
{% include ui/input-group.html prepend="@" placeholder="username" %}
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
</div>
<div class="mb-3">
<label class="form-label">Subdomain</label>
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
</div>
<div class="mb-3">
<label class="form-label">Your vanity URL</label>
{% include ui/input-group.html prepend="https://example.com/users/" %}
{% include ui/form/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" %}
{% include ui/form/input-group.html prepend="$" append=".00" %}
</div>
<div class="mb-3">
pages/_includes/forms/form-elements-5.html
+2 -2
View File
@@ -50,11 +50,11 @@
<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 %}
{% include ui/form/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
</div>
<div class="mb-3">
<label class="form-label">Telephone mask</label>
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
</div>
<div class="mb-3">
pages/_includes/parts/input-icon.html
+2 -2
View File
@@ -1,5 +1,5 @@
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include ui/input-icon.html class="mb-3" %}
{% include ui/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
{% include ui/form/input-icon.html class="mb-3" %}
{% include ui/form/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
</div>
pages/_includes/parts/input-selectgroups.html
+4 -4
View File
@@ -1,18 +1,18 @@
<div class="mb-3">
<label class="form-label">Shipping methods</label>
{% include_cached ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
{% include_cached ui/form/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_cached ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
{% include_cached ui/form/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_cached ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
{% include_cached ui/form/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_cached ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
{% include_cached ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
</div>
pages/_includes/ui/input-group.html → pages/_includes/ui/form/input-group.html
View File
pages/_includes/ui/input-icon.html → pages/_includes/ui/form/input-icon.html
View File
pages/_includes/ui/input-mask.html → pages/_includes/ui/form/input-mask.html
View File
pages/_includes/ui/input-selectgroup.html → pages/_includes/ui/form/input-selectgroup.html
View File
pages/_includes/ui/form/selectize.html
-47
View File
@@ -28,52 +28,5 @@
$(document).ready(function(){
$('#select-{{ key }}').selectize({});
});
// $('#input-tags').selectize({
// delimiter: ',',
// persist: false,
// create: function (input) {
// return {
// value: input,
// text: input
// };
// }
// });
//
// $('#select-beast').selectize({});
//
// $('#select-users').selectize({
// render: {
// option: function (data, escape) {
// return '<div>' +
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
// '<span class="title">' + escape(data.text) + '</span>' +
// '</div>';
// },
// item: function (data, escape) {
// return '<div>' +
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
// escape(data.text) +
// '</div>';
// }
// }
// });
//
// $('#select-countries').selectize({
// render: {
// option: function (data, escape) {
// return '<div>' +
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
// '<span class="title">' + escape(data.text) + '</span>' +
// '</div>';
// },
// item: function (data, escape) {
// return '<div>' +
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
// escape(data.text) +
// '</div>';
// }
// }
// });
</script>
{% endcapture_global %}
pages/ribbons.html
+20 -20
View File
@@ -7,24 +7,24 @@ done: true
{% assign col-class = "col-sm-6 col-lg-4 col-xl-3" %}
<div class="row">
<div class="{{ col-class }}">{% include cards/ribbon.html %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html top=true left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html color="red" %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html color="green" bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html top=true left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html color="red" %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html color="green" bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="teal" left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="purple" top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
</div>