206 lines
15 KiB
Plaintext
206 lines
15 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
- var jquery_ui = true;
|
|
- var form_builder_2 = 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
|
|
| Form Builder 2
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Form Builder
|
|
li.breadcrumb-item.active Form Builder 2
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.form-builder
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Form Builder
|
|
.card-body.form-builder
|
|
.form-builder-column
|
|
.row
|
|
.col-sm-12
|
|
.form-builder-2-header
|
|
div
|
|
ul#pills-tab.nav.nav-primary(role='tablist')
|
|
li.nav-item
|
|
a#pills-input-tab.nav-link.active(data-bs-toggle='pill', href='#pills-input', role='tab', aria-controls='pills-input', aria-selected='true') Input
|
|
li.nav-item
|
|
a#pills-radcheck-tab.nav-link(data-bs-toggle='pill', href='#pills-radcheck', role='tab', aria-controls='pills-radcheck', aria-selected='false') Radio/Checkbox
|
|
li.nav-item
|
|
a#pills-select-tab.nav-link(data-bs-toggle='pill', href='#pills-select', role='tab', aria-controls='pills-select', aria-selected='false') Select
|
|
li.nav-item
|
|
a#pills-button-tab.nav-link(data-bs-toggle='pill', href='#pills-button', role='tab', aria-controls='pills-button', aria-selected='false') Buttons
|
|
div
|
|
nav.navbar.navbar-expand-md.p-0
|
|
form.form-inline
|
|
.me-2
|
|
select#n-columns.btn.form-control.b-light
|
|
option(value='1') 1 Column
|
|
option(value='2') 2 Columns
|
|
button#copy-to-clipboard.btn.btn-primary.copy-btn(type='submit', data-clipboard-text='testing') Copy HTML
|
|
.col-lg-6.col-xl-6
|
|
#pills-tabContent.tab-content
|
|
#pills-input.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='pills-input-tab')
|
|
form.theme-form
|
|
.mb-3.draggable
|
|
label(for='input-text-1') Text Input
|
|
input#input-text-1.form-control.btn-square(type='email', placeholder='Enter email')
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label(for='input-password-1') Password
|
|
input#input-password-1.form-control.btn-square(type='password', placeholder='Password')
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label(for='select-1') Select
|
|
select#select-1.form-control.btn-square
|
|
option(value='Option 1') Option 1
|
|
option(value='Option 2') Option 2
|
|
option(value='Option 3') Option 3
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label(for='input-file-1') File input
|
|
input#input-file-1(type='file')
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label(for='prependedcheckbox') Appended Checkbox
|
|
.input-group
|
|
span.input-group-text
|
|
input(type='checkbox').me-0
|
|
input#prependedcheckbox.form-control.btn-square(name='prependedcheckbox', type='text', placeholder='Placeholder')
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label(for='prependedcheckbox') Button DropDown
|
|
.input-group
|
|
input#buttondropdown.form-control.btn-square(name='buttondropdown', placeholder='Placeholder', type='text')
|
|
.input-group-btn.btn.btn-square.p-0
|
|
button.btn.btn-primary.dropdown-toggle.btn-square(type='button', data-bs-toggle='dropdown')
|
|
| Action
|
|
span.caret
|
|
ul.dropdown-menu.pull-right
|
|
li
|
|
a.dropdown-item(href='#') Option one
|
|
li
|
|
a.dropdown-item(href='#') Option two
|
|
li
|
|
a.dropdown-item(href='#') Option three
|
|
p.help-block Example block-level help text here.
|
|
#pills-radcheck.tab-pane.fade(role='tabpanel', aria-labelledby='pills-radcheck-tab')
|
|
form.theme-form
|
|
.mb-3.draggable
|
|
label Inline checkbox
|
|
.col
|
|
.m-checkbox-inline
|
|
.checkbox
|
|
input#checkbox1(type='checkbox')
|
|
label(for='checkbox1') Default 1
|
|
.checkbox
|
|
input#checkbox2(type='checkbox')
|
|
label(for='checkbox2') Default 2
|
|
.checkbox
|
|
input#checkbox3(type='checkbox')
|
|
label(for='checkbox3') Default 3
|
|
p.help-block.m-t-help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label Inline Radiobox
|
|
.col
|
|
.m-checkbox-inline
|
|
.radio.radio-theme
|
|
input#radioinline1(type='radio', name='radio1', value='option1')
|
|
label(for='radioinline1') Option 1
|
|
.radio.radio-theme
|
|
input#radioinline2(type='radio', name='radio1', value='option2')
|
|
label(for='radioinline2') Option 2
|
|
.radio.radio-theme
|
|
input#radioinline3(type='radio', name='radio1', value='option3')
|
|
label(for='radioinline3') Option 3
|
|
p.help-block.m-t-help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label Custom checkbox
|
|
.col
|
|
.checkbox
|
|
input#checkbox-def(type='checkbox')
|
|
label(for='checkbox-def') Default
|
|
.checkbox
|
|
input#checkbox-dis(type='checkbox', disabled='')
|
|
label(for='checkbox-dis') Disabled
|
|
.checkbox
|
|
input#checkbox-chk(type='checkbox', checked='')
|
|
label(for='checkbox-chk') Checked
|
|
p.help-block Example block-level help text here.
|
|
#pills-select.tab-pane.fade(role='tabpanel', aria-labelledby='pills-select-tab')
|
|
form.theme-form
|
|
.mb-3.draggable
|
|
label(for='formcontrol-select1') Example select
|
|
select#formcontrol-select1.form-control.btn-square
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label(for='formcontrol-select2') Example multiple select
|
|
select#formcontrol-select2.form-control.btn-square(multiple='')
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
p.help-block Example block-level help text here.
|
|
#pills-button.tab-pane.fade(role='tabpanel', aria-labelledby='pills-button-tab')
|
|
form.theme-form
|
|
.mb-3.draggable
|
|
label.m-r-10 Single Button
|
|
br
|
|
button.btn.btn-primary.active(type='button', data-original-title='btn btn-dark active', title='') Button
|
|
p.help-block Example block-level help text here.
|
|
hr
|
|
.mb-3.draggable
|
|
label.m-r-10 Double Button
|
|
br
|
|
button.btn.btn-primary(type='button', data-original-title='btn btn-primary-gradien', title='') Primary
|
|
button.btn.btn-secondary(type='button', data-original-title='btn btn-primary-gradien', title='') Secondary
|
|
p.help-block Example block-level help text here.
|
|
.col-lg-6.col-xl-6.lg-mt
|
|
// Form builder column wise start
|
|
.drag-bx.card-body
|
|
.text-muted.empty-form.text-center
|
|
h6 Drag & Drop elements to build form.
|
|
.form-body.row.form-builder-2
|
|
.col-md-12.droppable.sortable
|
|
.col-md-6.droppable.sortable(style='display: none;')
|
|
.col-md-6.droppable.sortable(style='display: none;')
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|