bootstrap-switch/src/docs/examples.jade

.bs-docs-header
  .container
    h1 Examples

.container
  .row
    .col-sm-6.col-lg-4
      h2.h4 State
      p
        input#switch-state(type='checkbox', checked)
      .btn-group
        button.btn.btn-default(type='button' data-switch-toggle='state') Toggle
        button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='true') Set true
        button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='false') Set false
        button.btn.btn-default(type='button', data-switch-get='state') Get

    .col-sm-6.col-lg-4
      h2.h4 Size
      p
        input#switch-size(type='checkbox', checked, data-size='mini')
      .btn-group
        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='mini') Mini
        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='small') Small
        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='normal') Normal
        button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='large') Large
        button.btn.btn-default(type='button', data-switch-get='size') Get

    .col-sm-6.col-lg-4
      h2.h4 Animate
      p
        input#switch-animate(type='checkbox', checked)
      p
        button.btn.btn-default(type='button', data-switch-toggle='animate') Toggle
        button.btn.btn-default(type='button', data-switch-get='animate') Get

    .col-sm-6.col-lg-4
      h2.h4 Disabled
      p
        input#switch-disabled(type='checkbox', checked, disabled)
      p
        button.btn.btn-default(type='button', data-switch-toggle='disabled') Toggle
        button.btn.btn-default(type='button', data-switch-get='disabled') Get

    .col-sm-6.col-lg-4
      h2.h4 Readonly
      p
        input#switch-readonly(type='checkbox', checked, readonly)
      p
        button.btn.btn-default(type='button', data-switch-toggle='readonly') Toggle
        button.btn.btn-default(type='button', data-switch-get='readonly') Get

    .col-sm-6.col-lg-4
      h2.h4 Indeterminate
      p
        input#switch-indeterminate(type='checkbox', checked, data-indeterminate='true')
      p
        button.btn.btn-default(type='button', data-switch-toggle='indeterminate') Toggle
        button.btn.btn-default(type='button', data-switch-get='indeterminate') Get

    .col-sm-6.col-lg-4
      h2.h4 Inverse
      p
        input#switch-inverse(type='checkbox', checked, data-inverse='true')
      p
        button.btn.btn-default(type='button', data-switch-toggle='inverse') Toggle
        button.btn.btn-default(type='button', data-switch-get='inverse') Get

    .col-sm-6.col-lg-4
      h2.h4 On Color
      p
        input#switch-onColor(type='checkbox', checked, data-on-color='info')
      p.btn-group
        .btn-group
          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
            | Set  
            span.caret
          .dropdown-menu(role='menu')
            li: a(data-switch-set='onColor', data-switch-value='primary') Primary
            li: a(data-switch-set='onColor', data-switch-value='info') Info
            li: a(data-switch-set='onColor', data-switch-value='success') Success
            li: a(data-switch-set='onColor', data-switch-value='warning') Warning
            li: a(data-switch-set='onColor', data-switch-value='default') Default
        button.btn.btn-default(type='button', data-switch-get='onColor') Get

    .col-sm-6.col-lg-4
      h2.h4 Off Color
      p
        input#switch-offColor(type='checkbox', data-off-color='warning')
      p.btn-group
        .btn-group
          button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
            | Set  
            span.caret
          .dropdown-menu(role='menu')
            li: a(data-switch-set='offColor', data-switch-value='primary') Primary
            li: a(data-switch-set='offColor', data-switch-value='info') Info
            li: a(data-switch-set='offColor', data-switch-value='success') Success
            li: a(data-switch-set='offColor', data-switch-value='warning') Warning
            li: a(data-switch-set='offColor', data-switch-value='default') Default
        button.btn.btn-default(type='button', data-switch-get='offColor') Get

    .col-sm-6.col-lg-4
      h2.h4 On Text
      p
        input#switch-onText(type='checkbox', checked, data-on-text='Yes')
      .row
        .col-sm-6
          input.form-control(type='text', data-switch-set-value='onText', value='Yes')

    .col-sm-6.col-lg-4
      h2.h4 Off Text
      p
        input#switch-offText(type='checkbox', data-off-text='No')
      .row
        .col-sm-6
          input.form-control(type='text', data-switch-set-value='offText', value='No')

    .col-sm-6.col-lg-4
      h2.h4 Label Text
      p
        input#switch-labelText(type='checkbox', data-label-text='Label')
      .row
        .col-sm-6
          input.form-control(type='text', data-switch-set-value='labelText')

    .col-sm-6.col-lg-4
      h2.h4 Handle Width
      p
        input#switch-handleWidth(type='checkbox', data-handle-width='100')
      .row
        .col-sm-6
          input.form-control(type='number', data-switch-set-value='handleWidth', value='100')

    .col-sm-6.col-lg-4
      h2.h4 Label Width
      p
        input#switch-labelWidth(type='checkbox', data-label-width='100')
      .row
        .col-sm-6
          input.form-control(type='number', data-switch-set-value='labelWidth', value='100')

    .col-sm-6.col-lg-4
      h2.h4 Create | Destroy
      p
        input#switch-create-destroy(type='checkbox', checked, data-switch-no-init)
      .row
        .col-sm-6
          button.btn.btn-default(type='button', data-switch-create-destroy, data-destroy-text="Destroy") Create

  br
  br

  .text-center
    h2.h4 Radio All Off
    .row
      .col-sm-6
        h3.h5 Disabled
        input.switch-radio1(type='radio', name='radio1', checked)
        input.switch-radio1(type='radio', name='radio1')
        input.switch-radio1(type='radio', name='radio1')
      .col-sm-6
        h3.h5 Enabled
        input.switch-radio2(type='radio', name='radio2', checked, data-radio-all-off='true')
        input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')
        input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true')

    br
    hr


    h2.h4 Inside Modals
    button.btn.btn-default(data-toggle='modal', data-target='#modal-switch') Open Modal
    .modal.fade#modal-switch(tabindex='-1', role='dialog', aria-labelledby='modal-switch-label')
      .modal-dialog
        .modal-content
          .modal-header
            button.close(type='button', data-dismiss='modal')
              span(aria-hidden='true') ×
              span.sr-only Close
            .modal-title#modal-switch-label Title
          .modal-body
            input#switch-modal(type='checkbox', checked)