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

input masks

Browse Source
This commit is contained in:
codecalm
2018-02-19 21:43:55 +01:00
parent b091dd53cc
commit 8290c1aa6c
4 changed files with 102 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/cards/form-all-elements.html
+86 -85
View File
@@ -10,23 +10,19 @@
<div class="form-control-plaintext">Username</div>
</div>
<div class="form-group">
<label class="form-label" for="example-text-input">Text</label>
<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" for="example-disabled-input">Disabled</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, she turned me into a newt."
disabled>
<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" for="example-disabled-input">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, how'd you become king, then?"
readonly>
<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" for="example-textarea-input">Textarea <span class="form-label-small">56/100</span></label>
<label class="form-label">Textarea <span class="form-label-small">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>
@@ -86,28 +82,29 @@
<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 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-6 col-lg-4">
<div class="form-group">
<label class="form-label" for="example-password-input">Password</label>
<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" for="example-text-input-valid">Valid State</label>
<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" for="example-text-input-invalid">Invalid State</label>
<label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
placeholder="Invalid State..">
placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div>
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
@@ -257,17 +254,19 @@
</div>
<div class="form-group">
<div class="form-label">Inline Radios</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
<span class="custom-control-label">Option 1</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
<span class="custom-control-label">Option 2</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
<span class="custom-control-label">Option 3</span>
<div class="custom-controls-stacked">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
<span class="custom-control-label">Option 1</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
<span class="custom-control-label">Option 2</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
<span class="custom-control-label">Option 3</span>
</div>
</div>
</div>
<div class="form-group">
@@ -293,18 +292,20 @@
</div>
<div class="form-group">
<div class="form-label">Inline Checkboxes</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
checked="">
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
<label class="custom-control-label">Option 3</label>
<div class="custom-controls-stacked">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
checked="">
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
<label class="custom-control-label">Option 3</label>
</div>
</div>
</div>
<div class="form-group">
@@ -606,55 +607,55 @@
{% contentfor js %}
<script>
require(['jquery', 'selectize'], function ($, selectize) {
$(document).ready(function () {
$('#input-tags').selectize({
delimiter: ',',
persist: false,
create: function (input) {
return {
value: input,
text: input
}
}
});
require(['jquery', 'selectize'], function ($, selectize) {
$(document).ready(function () {
$('#input-tags').selectize({
delimiter: ',',
persist: false,
create: function (input) {
return {
value: input,
text: input
}
}
});
$('#select-beast').selectize({});
$('#select-beast').selectize({});
$('#select-users').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
$('#select-users').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
$('#select-countries').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
});
});
$('#select-countries').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
});
});
</script>
{% endcontentfor %}