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

form inputs refactoring

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
+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">
+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">
+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>
@@ -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>
-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 %}