bootstrap4-toggle
Advanced tools
Comparing version 3.0.0 to 3.1.0
/*\ | ||
|*| ======================================================================== | ||
|*| Bootstrap Toggle: bootstrap4-toggle.js v3.0.0 | ||
|*| Bootstrap Toggle: bootstrap4-toggle.js v3.1.0 | ||
|*| https://gitbrent.github.io/bootstrap-toggle/ | ||
@@ -5,0 +5,0 @@ |*| ======================================================================== |
{ | ||
"name": "bootstrap4-toggle", | ||
"version": "3.0.0", | ||
"version": "3.1.0", | ||
"author": { | ||
@@ -8,14 +8,21 @@ "name": "Brent Ely", | ||
}, | ||
"description": "Bootstrap4 Toggle is a bootstrap 4 plugin that converts checkboxes into toggles.", | ||
"description": "Bootstrap 4 Toggle is a bootstrap 4 plugin that converts checkboxes into toggles.", | ||
"homepage": "https://gitbrent.github.io/bootstrap4-toggle/", | ||
"license": "MIT", | ||
"main": "js/bootstrap-toggle.js", | ||
"files": [ | ||
"css/bootstrap4-toggle.css", | ||
"js/bootstrap4-toggle.js" | ||
], | ||
"keywords": [ | ||
"bootstrap", | ||
"bootstrap4", | ||
"bootstrap-4", | ||
"bootstrap 4", | ||
"bootstrap 4 checkbox", | ||
"bootstrap 4 switch", | ||
"bootstrap 4 toggle", | ||
"bootstrap-checkbox", | ||
"bootstrap-switch", | ||
"bootstrap-toggle", | ||
"bootstrap4-toggle", | ||
"switch", | ||
"toggle" | ||
"bootstrap-toggle" | ||
], | ||
@@ -22,0 +29,0 @@ "repository": { |
@@ -1,31 +0,37 @@ | ||
[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badge/) [![MIT License](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) | ||
[![Bootstrap 4.1.3](https://img.shields.io/badge/bootstrap-4.1.3-green.svg?style=flat-square)](https://getbootstrap.com/docs/4.1) [![MIT License](https://badges.frapsoft.com/os/mit/mit.svg?style=flat-square)](https://opensource.org/licenses/mit-license.php) | ||
# Bootstrap4 Toggle | ||
# Bootstrap 4 Toggle | ||
Bootstrap4 Toggle is a Bootstrap 4 widget/plugin that converts checkboxes into toggles. | ||
**Bootstrap 4 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles. | ||
Visit https://gitbrent.github.io/bootstrap4-toggle/ for demos. | ||
Visit https://gitbrent.github.io/bootstrap4-toggle/ for interactive demos. | ||
## Getting Started | ||
## Installation | ||
### Installation | ||
You can [download](https://github.com/gitbrent/bootstrap4-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library. | ||
### Download | ||
[Version 3.1.0](https://github.com/gitbrent/bootstrap4-toggle/archive/v3.1.0.zip) is the latest version of Bootstrap4 Toggle. | ||
### Use CDN | ||
```html | ||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.0.0/css/bootstrap4-toggle.min.css" rel="stylesheet"> | ||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.0.0/js/bootstrap4-toggle.min.js"></script> | ||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.1.0/css/bootstrap4-toggle.min.css" rel="stylesheet"> | ||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.1.0/js/bootstrap4-toggle.min.js"></script> | ||
``` | ||
### Bower Install | ||
### Node.js | ||
```bash | ||
bower install bootstrap4-toggle | ||
npm install bootstrap4-toggle | ||
``` | ||
### Yarn | ||
```bash | ||
yarn install | ||
``` | ||
## Usage | ||
### Basic example | ||
Simply add `data-toggle="toggle"` to convert checkboxes into toggles. | ||
Simply add `data-toggle="toggle"` to automatically convert checkboxes into toggles. | ||
```html | ||
<input type="checkbox" checked data-toggle="toggle"> | ||
<input id="chkToggle" type="checkbox" data-toggle="toggle"> | ||
``` | ||
@@ -81,3 +87,4 @@ | ||
### Options | ||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`. | ||
* Options can be passed via data attributes or JavaScript | ||
* For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`) | ||
@@ -97,12 +104,12 @@ ```html | ||
Name|Type|Default|Description| | ||
---|---|---|--- | ||
`on`|string/html|"On"|Text of the on toggle | ||
`off`|string/html|"Off"|Text of the off toggle | ||
`size`|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`. | ||
`onstyle`|string|"primary"|Style of the on toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` | ||
`offstyle`|string|"secondary"|Style of the off toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` | ||
`style`|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. | ||
`width`|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated. | ||
`height`|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated. | ||
Name |Type |Default |Description | | ||
----------|-----------|----------|----------------------------| | ||
`on` |string/html|"On" |Text of the on toggle | ||
`off` |string/html|"Off" |Text of the off toggle | ||
`size` |string |"normal" |Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`. | ||
`onstyle` |string |"primary" |Style of the on toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` | ||
`offstyle`|string |"light" |Style of the off toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` | ||
`style` |string | |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. | ||
`width` |integer |*null* |Sets the width of the toggle. if set to *null*, width will be auto-calculated. | ||
`height` |integer |*null* |Sets the height of the toggle. if set to *null*, height will be auto-calculated. | ||
@@ -116,11 +123,11 @@ ### Methods | ||
Method |Example |Description | ||
-----------|----------------------------------------------|------------------------------------------ | ||
initialize | $('#toggle-demo').bootstrapToggle() |Initializes the toggle plugin with options | ||
destroy | $('#toggle-demo').bootstrapToggle('destroy') |Destroys the toggle | ||
on | $('#toggle-demo').bootstrapToggle('on') |Sets the toggle to 'On' state | ||
off | $('#toggle-demo').bootstrapToggle('off') |Sets the toggle to 'Off' state | ||
toggle | $('#toggle-demo').bootstrapToggle('toggle') |Toggles the state of the toggle | ||
enable | $('#toggle-demo').bootstrapToggle('enable') |Enables the toggle | ||
disable | $('#toggle-demo').bootstrapToggle('disable') |Disables the toggle | ||
Method |Example |Description | ||
-----------|------------------------------------------------|------------------------------------------ | ||
initialize | `$('#toggle-demo').bootstrapToggle()` |Initializes the toggle plugin with options | ||
destroy | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle | ||
on | `$('#toggle-demo').bootstrapToggle('on')` |Sets the toggle to 'On' state | ||
off | `$('#toggle-demo').bootstrapToggle('off')` |Sets the toggle to 'Off' state | ||
toggle | `$('#toggle-demo').bootstrapToggle('toggle')` |Toggles the state of the toggle on/off | ||
enable | `$('#toggle-demo').bootstrapToggle('enable')` |Enables the toggle | ||
disable | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle | ||
@@ -151,17 +158,17 @@ ## Events | ||
<input id="toggle-trigger" type="checkbox" data-toggle="toggle"> | ||
<button class="btn btn-success" onclick="toggleOn()">On by API</button> | ||
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button> | ||
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button> | ||
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button> | ||
<button class="btn btn-success" onclick="toggleApiOn()" >On by API</button> | ||
<button class="btn btn-danger" onclick="toggleApiOff()">Off by API</button> | ||
<button class="btn btn-success" onclick="toggleInpOn()" >On by Input</button> | ||
<button class="btn btn-danger" onclick="toggleInpOff()">Off by Input</button> | ||
<script> | ||
function toggleOn() { | ||
function toggleApiOn() { | ||
$('#toggle-trigger').bootstrapToggle('on') | ||
} | ||
function toggleOff() { | ||
function toggleApiOff() { | ||
$('#toggle-trigger').bootstrapToggle('off') | ||
} | ||
function toggleOnByInput() { | ||
function toggleInpOn() { | ||
$('#toggle-trigger').prop('checked', true).change() | ||
} | ||
function toggleOffByInput() { | ||
function toggleInpOff() { | ||
$('#toggle-trigger').prop('checked', false).change() | ||
@@ -168,0 +175,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
177
17207
6
244