...
State | Image | Comment |
|---|---|---|
Regular |  | |
Hover |    | |
Active |    | |
Disabled |  | |
Error |  | |
Warning |  | |
Focused |  | |
Focused, Hover |    | |
Focused, Active |    | |
Focused, Disabled |  |
...
While focused on the number field, the up/down keys on the keyboard will increase/decrease the value. The number field will remain focused and the text cursor will remain in place.
The user may enter a numeric value using the keyboard.
Long press on up/down buttons will enable faster continuous increment or decrement.
Pressing the Tab key or clicking outside of the control will move the focus away from the stepper and set the defined value (or the last valid value).
Validations and Errors
  |
When the stepper reaches the minimum or maximum value, the up/down buttons will be disabled respectively.
Other validations will be provided for invalid syntax, invalid numbers, and missing values. See Field Validation for more info.
...
Zeplin link | |
|---|---|
.png?version=3&modificationDate=1635085184016&cacheVersion=1&api=v2) |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Spinner <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" disabled>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" disabled>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" readonly>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" readonly>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm is-invalid increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm is-invalid decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm is-invalid increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm is-invalid decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<script>
$(".spinner-group .increment").on( "click", function() {
$(this).closest('.form-control-container').find('.form-control[type="number"]').val( function(i, oldval) {
return ++oldval;
});
});
$(".spinner-group .decrement").on( "click", function() {
$(this).closest('.form-control-container').find('.form-control[type="number"]').val( function(i, oldval) {
return --oldval;
});
});
</script> |
...