238 lines
12 KiB
Plaintext
238 lines
12 KiB
Plaintext
- 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="<i class='fa fa-check'></i>", 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="<i class='fa fa-angle-down'></i>", data-bts-button-up-txt="<i class='fa fa-angle-up'></i>")
|
|
.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 |