keiwen/enhanced-check

There is no license information available for the latest version (2.1) of this package.

Enhance checkboxes and radio buttons design

Maintainers

Details

github.com/Keiwen/enhancedCheck

Source

Issues

Installs: 13

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 2

Forks: 1

Open Issues: 0

Language:JavaScript

Type:component

2.1 2017-03-14 14:04 UTC

Unknown License c1cbbcf35372670718a593612841a804cad1fdad

This package is auto-updated.

Last update: 2024-04-26 04:57:11 UTC

README

Require Bootstrap >= 3.0.0

Known issue about angular disabled style

Demo

Components

Basic

Enhance checkboxes and radio buttons design. Just put input and label (label after input) in a div with desired class

  • enhancedCheck: base class:
  • enhancedCheck-inline: display inputs inline if they are nested into not-inline div
  • enhancedCheck-[primary|success|danger|warning]: change base color to [blue|green|red|orange]
  • enhancedCheck-combine: alternate design for checkboxes, aiming at grouping values
  • enhancedCheck-animate: color change slowly on select/unselect

Toggle

Also provide toggles/checkboxes. Just provide "enhancedCheck-toggle" class on input, and you can configure data attributes. Toggle require jQuery!

  • data-on: label for toggle checked
  • data-off: label for toggle unchecked
  • data-onstyle: bootstrap class for checked label (success/warning/danger/...)
  • data-offstyle: bootstrap class for unchecked label (success/warning/danger/...)
  • data-style: toggle border style ("squarred", "rounded", empty is default (medium))

If you need angular 1 support, include directive file and use 'ui.enhancedCheck' module in your app. Obviously require angular in that case. You can add ngModel (required), ngDisabled and ngChange on your input tag.

Preview

See index.html or following sample alt tag

Samples

Typical HTML sample:

<div class="enhancedCheck enhancedCheck-primary">
  <input type="checkbox" id="sampleCheckbox">
  <label for="sampleCheckbox">Checkbox</label>
</div>

Or:

<div class="enhancedCheck enhancedCheck-success">
  <input type="radio" name="rb" id="sampleRadio1">
  <label for="sampleRadio1">Radio one</label>
  <input type="radio" name="rb" id="sampleRadio2">
  <label for="sampleRadio2">Radio two</label>
</div>

Toggle with angular:

<input type="checkbox" id="sampleCheckboxToggle" class="enhancedCheck-toggle"
       data-on="Enable" data-off="Disable" data-onstyle="success" data-offstyle="danger"
       data-style="rounded"
       ng-model="toggle" ng-change="toggleChange()" ng-disabled="toggleDisabled"/>