...
| 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"> <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> <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"><input><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"><input"><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=" disabled><-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"><input"><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=" readonly><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"><input"><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> |
...