uiLibrary : string (materialdesign|bootstrap|bootstrap4)Default: 'materialdesign'

The name of the UI library that is going to be in use. Currently we support only Material Design and Bootstrap.

The css files for Bootstrap should be manually included to the page if you use bootstrap as uiLibrary.

Examples

Material Design

    
 <input type="checkbox" id="checkbox"/><br/><br/>
 <button onclick="$chkb.state('checked')" class="gj-button-md">Checked</button>
 <button onclick="$chkb.state('unchecked')" class="gj-button-md">Unchecked</button>
 <button onclick="$chkb.state('indeterminate')" class="gj-button-md">Indeterminate</button>
 <button onclick="$chkb.prop('disabled', false)" class="gj-button-md">Enable</button>
 <button onclick="$chkb.prop('disabled', true)" class="gj-button-md">Disable</button>
 <script>
     var $chkb = $('#checkbox').checkbox({
         uiLibrary: 'materialdesign'
     });
 </script>

Bootstrap 3

    
 <div class="container-fluid" style="margin-top:10px">
     <input type="checkbox" id="checkbox"/><br/><br/>
     <button onclick="$chkb.state('checked')" class="btn btn-default">Checked</button>
     <button onclick="$chkb.state('unchecked')" class="btn btn-default">Unchecked</button>
     <button onclick="$chkb.state('indeterminate')" class="btn btn-default">Indeterminate</button>
     <button onclick="$chkb.prop('disabled', false)" class="btn btn-default">Enable</button>
     <button onclick="$chkb.prop('disabled', true)" class="btn btn-default">Disable</button>
 </div>
 <script>
     var $chkb = $('#checkbox').checkbox({
         uiLibrary: 'bootstrap'
     });
 </script>

Bootstrap 4

    
 <div class="container-fluid" style="margin-top:10px">
     <input type="checkbox" id="checkbox"/><br/><br/>
     <button onclick="$chkb.state('checked')" class="btn btn-default">Checked</button>
     <button onclick="$chkb.state('unchecked')" class="btn btn-default">Unchecked</button>
     <button onclick="$chkb.state('indeterminate')" class="btn btn-default">Indeterminate</button>
     <button onclick="$chkb.prop('disabled', false)" class="btn btn-default">Enable</button>
     <button onclick="$chkb.prop('disabled', true)" class="btn btn-default">Disable</button>
 </div>
 <script>
     var $chkb = $('#checkbox').checkbox({
         uiLibrary: 'bootstrap4'
     });
 </script>

Bootstrap 5

    
 <div class="container-fluid" style="margin-top:10px">
     <input type="checkbox" id="checkbox"/><br/><br/>
     <button onclick="$chkb.state('checked')" class="btn btn-default">Checked</button>
     <button onclick="$chkb.state('unchecked')" class="btn btn-default">Unchecked</button>
     <button onclick="$chkb.state('indeterminate')" class="btn btn-default">Indeterminate</button>
     <button onclick="$chkb.prop('disabled', false)" class="btn btn-default">Enable</button>
     <button onclick="$chkb.prop('disabled', true)" class="btn btn-default">Disable</button>
 </div>
 <script>
     var $chkb = $('#checkbox').checkbox({
         uiLibrary: 'bootstrap5'
     });
 </script>