- var touchspin = true;
- var theme_customizer = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
// page-wrapper Start
#pageWrapper.page-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper.horizontal-menu
include ../../components/sidebar
.page-body
.container-fluid
.page-header
.row
.col-sm-6
h3
| Touchspin
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Forms
li.breadcrumb-item Form Widgets
li.breadcrumb-item.active Touchspin
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
// Container-fluid starts
.container-fluid
// Bootstrap TouchSpin Spinners start
.bootstrap-touchspin
.row
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Default Touchspin
span
| Add
code .touchspin
| class to input to add touchspin input group.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='40')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title vertical Touchspin
span
| Add
code .touchspin-vertical
| class for vertical touchspin input group.
.card-body
fieldset
.touchspin-vertical-tab
input.touchspin-vertical(type='text', value='55')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin with Postfix
span
| Add
code data-bts-postfix="POSTFIX_VALUE"
| attribute to input to add postfix to touchspin input group.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='40', data-bts-postfix='%')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin with Prefix
span
| Add
code data-bts-prefix="PREFIX_VALUE"
| attribute to input to add prefix to touchspin input group.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='40', data-bts-prefix='#')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Min Max Value of Touchspin
span
| Use
code data-bts-min="VALUE" data-bts-max="VALUE"
| attribute to input to set min and max value of touchspin input.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='40', data-bts-min='1', data-bts-max='100')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin with initial Value
span
| Add
code data-bts-init-val="VALUE"
| attribute attribute to set initial value for input group.
.card-body
fieldset
.input-group
input.touchspin(type='text', data-bts-init-val='20')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin steps
span
| Add
code data-bts-step="VALUE"
| attribute for increament and decrement steps to touchspin input group.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='40', data-bts-step='10')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Decimal Value of Touchspin
span
| Use
code data-bts-decimal="VALUE"
| attribute to use decimal value of touchspin input.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='50.00', data-bts-step='0.25', data-bts-decimals='2')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Change Button Class to link
span
| Add
code data-bts-button-down-class & data-bts-button-up-class
| attribute to change button Class.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='40', data-bts-button-down-class='btn btn-link', data-bts-button-up-class='btn btn-link')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin With Icon
span
| Add icon class in
code data-bts-postfix
| attribute to icon to postfix as well prefix.
.card-body
fieldset
.input-group
input.touchspin(type='text', data-bts-postfix="", value='40')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin Icon Button
span
| Use
code data-bts-button-down-txt & data-bts-button-up-txt
| attribute to set touchspin icon button.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='50.00', data-bts-button-down-txt="", data-bts-button-up-txt="")
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin With Dropdown
span
| Use
code data-bts-prefix & data-bts-postfix
| attribute to set Prefix and Postfix to touchspin input with button.
.card-body
fieldset
.input-group
input.touchspin(type='text', value='50.00', data-bts-prefix='Pre', data-bts-postfix='Post')
.dropdown-basic
.dropdown
.btn-group.mb-0.me-0
button.dropbtn.btn-light.txt-dark(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
.dropdown-divider
a(href='#') Separated Link
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Touchspin mousewheel Disable
span
| Add
code .touchspin-stop-mousewheel
| class to diable mousewheel.
.card-body
fieldset
.input-group
input.touchspin-stop-mousewheel(type='text', value='40')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Small Horizontal Touchspin
span
| Add
code .input-group-sm
| class to input-group.
.card-body
fieldset
.input-group.input-group-sm
input.touchspin(type='text', value='60')
.col-sm-12.col-md-6
.card
.card-header.pb-0
h5.card-title Large Horizontal Touchspin
.card-body
p
| Add
code .input-group-lg
| class to input-group.
fieldset
.input-group.input-group-lg
input.touchspin(type='text', value='40')
// Bootstrap TouchSpin Spinners End
// Container-fluid Ends
// Container-fluid Ends
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files