Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bootstrap4-toggle

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootstrap4-toggle - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

CHANGELOG.md

2

js/bootstrap4-toggle.js
/*\
|*| ========================================================================
|*| 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc