├── .gitignore ├── CHANGELOG.md ├── CNAME ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── css ├── bootstrap4-toggle.css └── bootstrap4-toggle.min.css ├── doc ├── bootstrap4-toggle-demo.gif ├── header.png ├── script.js └── stylesheet.css ├── index.html ├── js ├── bootstrap4-toggle.js ├── bootstrap4-toggle.min.js └── bootstrap4-toggle.min.js.map ├── package-lock.json ├── package.json └── test └── test-all-sizes.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | *.log 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## Unreleased 8 | 9 | ## [3.7.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.7.0) 2019-??-?? 10 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.6.0...v3.7.0) 11 | 12 | ## [3.6.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.6.0) 2019-10-17 13 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.5.0...v3.6.0) 14 | ### Added 15 | - Added option to change toggle without triggering onChange event (silent toggle) [\#7](https://github.com/gitbrent/bootstrap4-toggle/issue/7) ([aswin1980](https://github.com/aswin1980)) 16 | - Added accessibility properties to labels [\#11](https://github.com/gitbrent/bootstrap4-toggle/issue/11) ([aproquot](https://github.com/aproquot)) 17 | ### Changed 18 | - Fixed URLs in js and css file top comment [\#5](https://github.com/gitbrent/bootstrap4-toggle/issue/5) ([wilecoyte78](https://github.com/wilecoyte78)) 19 | - Disable style is not working [\#18](https://github.com/gitbrent/bootstrap4-toggle/issue/18) ([rychlym](https://github.com/rychlym)) 20 | 21 | ## [3.5.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.5.0) 2019-07-02 22 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.4.0...v3.5.0) 23 | ### Added 24 | - Added ARIA `role="button"` tag to toggle 25 | - Added `cursor: pointer;` style to toggle 26 | ### Changed 27 | - Fixed: Touch not working on mobile [\#2](https://github.com/gitbrent/bootstrap4-toggle/issue/2) ([wilecoyte78](https://github.com/wilecoyte78)) 28 | - Updated to Bootstrap version 4.3.1 29 | - Updated README with better Yarn instructions 30 | 31 | ## [3.4.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.4.0) 2019-01-03 32 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.3.0...v3.4.0) 33 | ### Added 34 | - Outline button styles are now available 35 | ### Changed 36 | - Updated to Bootstrap version 4.2.1 37 | 38 | ## [3.3.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.3.0) 2018-12-19 39 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.2.0...v3.3.0) 40 | ### Added 41 | - New test created to compare core bootstrap sizes to bootstrap4-toggle 42 | ### Changed 43 | - Introduced new `size` values that mirror bootstrap 4: (`lg`, `sm`, `xs`) 44 | - Converted all css units from `px` to `rem` 45 | - Properly added border on `light` button (moved from .toggle class) 46 | ### Removed 47 | **DEPRECATED** Classic `size` values (`large`, `small`, `mini`) 48 | 49 | 50 | ## [3.2.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.2.0) 2018-11-27 51 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0) 52 | ### Added 53 | ### Changed 54 | - Removed permanent `active` state from "Off" label so mouse-over highlighting works the same as "On" 55 | ### Removed 56 | 57 | 58 | 59 | ## [3.1.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.1.0) 2018-10-25 60 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0) 61 | ### Added 62 | - `index.html` includes new section with dark mode colors 63 | ### Changed 64 | - `index.html` now fully responsive, better menu, rearranged sections 65 | - Tweaked `border` property to work with all backgrounds and colors 66 | ### Removed 67 | 68 | 69 | 70 | ## [3.0.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.0.0) 2018-10-21 71 | ### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0) 72 | ### Added 73 | - Touch support 74 | ### Changed 75 | - Implements Bootstrap 4 colors/styles 76 | ### Removed 77 | - Old Bootstrap 2 files 78 | 79 | [Unreleased]: https://github.com/gitbrent/bootstrap4-toggle/compare/v1.9.0...HEAD 80 | [3.2.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0 81 | [3.1.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0 82 | [3.0.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0 83 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | https://gitbrent.github.io/bootstrap4-toggle/ 2 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt){ 2 | 'use strict'; 3 | 4 | grunt.initConfig({ 5 | clean: ['dist'], 6 | uglify: { 7 | options: { 8 | preserveComments: 'some', 9 | sourceMap: true 10 | }, 11 | build: { 12 | expand: true, 13 | cwd: 'js', 14 | src: ['**/*.js', ['!**/*.min.js']], 15 | dest: 'js', 16 | ext: '.min.js', 17 | } 18 | }, 19 | cssmin: { 20 | options: { 21 | keepBreaks: true 22 | }, 23 | build: { 24 | expand: true, 25 | cwd: 'css', 26 | src: ['**/*.css', ['!**/*.min.css']], 27 | dest: 'css', 28 | ext: '.min.css', 29 | } 30 | } 31 | }); 32 | grunt.loadNpmTasks('grunt-contrib-clean'); 33 | grunt.loadNpmTasks('grunt-contrib-uglify'); 34 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 35 | grunt.registerTask('default', ['clean', 'uglify', 'cssmin']); 36 | }; 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2011-2014 Min Hur, The New York Times Company 4 | Copyright (c) 2018 Brent Ely 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![MIT Licence](https://img.shields.io/github/license/gitbrent/bootstrap4-toggle.svg)](https://opensource.org/licenses/mit-license.php) [![Bootstrap 4.2.1](https://img.shields.io/badge/bootstrap-4.3.1-green.svg?style=flat-square)](https://getbootstrap.com/docs/4.1) [![Known Vulnerabilities](https://snyk.io/test/npm/bootstrap4-toggle/badge.svg)](https://snyk.io/test/npm/bootstrap4-toggle) [![npm downloads](https://img.shields.io/npm/dm/bootstrap4-toggle.svg)](https://www.npmjs.com/package/bootstrap4-toggle) [![JSDelivr Badge](https://data.jsdelivr.com/v1/package/gh/gitbrent/bootstrap4-toggle/badge)](https://www.jsdelivr.com/package/gh/gitbrent/bootstrap4-toggle) 2 | 3 | # Bootstrap 4 Toggle 4 | 5 | **Bootstrap 4 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles. 6 | 7 | ************************************************************************************************** 8 | 9 | #### Library Distributions 10 | Project |Description 11 | -------------------------------------------------------------------------------------------|------------------------------------------------------- 12 | [bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle) | Supports bootstrap4 (requires jQuery) 13 | [bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button) | Supports bootstrap4+ (ES6 class, no dependencies) 14 | [bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies) 15 | 16 | # Demos 17 | **Demos and API Docs:** https://gitbrent.github.io/bootstrap4-toggle/ 18 | 19 | ![Demo GIF](https://github.com/gitbrent/bootstrap4-toggle/blob/master/doc/bootstrap4-toggle-demo.gif?raw=true) 20 | 21 | 22 | 23 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* 24 | 25 | - [Installation](#installation) 26 | - [CDN](#cdn) 27 | - [Download](#download) 28 | - [NPM](#npm) 29 | - [Yarn](#yarn) 30 | - [Usage](#usage) 31 | - [Initialize With HTML](#initialize-with-html) 32 | - [Initialize With Code](#initialize-with-code) 33 | - [API](#api) 34 | - [Options](#options) 35 | - [Methods](#methods) 36 | - [Events](#events) 37 | - [Event Propagation](#event-propagation) 38 | - [Stopping Event Propagation](#stopping-event-propagation) 39 | - [API vs Input](#api-vs-input) 40 | 41 | 42 | 43 | ************************************************************************************************** 44 | 45 | # Installation 46 | 47 | ## CDN 48 | ```html 49 | 50 | 51 | ``` 52 | 53 | ## Download 54 | [Latest GitHub Release](https://github.com/gitbrent/bootstrap4-toggle/releases/latest) 55 | 56 | ## NPM 57 | ```ksh 58 | npm install bootstrap4-toggle 59 | ``` 60 | 61 | ## Yarn 62 | ```ksh 63 | yarn add bootstrap4-toggle 64 | ``` 65 | 66 | # Usage 67 | 68 | ## Initialize With HTML 69 | Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 4 toggle. 70 | 71 | ```html 72 | 73 | ``` 74 | 75 | ## Initialize With Code 76 | Toggles can also be initialized via JavaScript code. 77 | 78 | EX: Initialize id `chkToggle` with a single line of JavaScript. 79 | ```html 80 | 81 | 86 | ``` 87 | 88 | # API 89 | 90 | ## Options 91 | * Options can be passed via data attributes or JavaScript 92 | * For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`) 93 | 94 | ```html 95 | 96 | 97 | 105 | ``` 106 | 107 | Name |Type |Default |Description | 108 | ----------|-----------|----------|----------------------------| 109 | `on` |string/html|"On" |Text of the on toggle 110 | `off` |string/html|"Off" |Text of the off toggle 111 | `size` |string |"normal" |Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`. 112 | `onstyle` |string |"primary" |Style of the on toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` 113 | `offstyle`|string |"light" |Style of the off toggle. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` 114 | `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. 115 | `width` |integer |*null* |Sets the width of the toggle. if set to *null*, width will be auto-calculated. 116 | `height` |integer |*null* |Sets the height of the toggle. if set to *null*, height will be auto-calculated. 117 | 118 | ## Methods 119 | Methods can be used to control toggles directly. 120 | 121 | ```html 122 | 123 | ``` 124 | 125 | Method |Example |Description 126 | -----------|------------------------------------------------|------------------------------------------ 127 | initialize | `$('#toggle-demo').bootstrapToggle()` |Initializes the toggle plugin with options 128 | destroy | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle 129 | on | `$('#toggle-demo').bootstrapToggle('on')` |Sets the toggle to 'On' state 130 | off | `$('#toggle-demo').bootstrapToggle('off')` |Sets the toggle to 'Off' state 131 | toggle | `$('#toggle-demo').bootstrapToggle('toggle')` |Toggles the state of the toggle on/off 132 | enable | `$('#toggle-demo').bootstrapToggle('enable')` |Enables the toggle 133 | disable | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle 134 | 135 | # Events 136 | 137 | ## Event Propagation 138 | Note All events are propagated to and from input element to the toggle. 139 | 140 | You should listen to events from the `` directly rather than look for custom events. 141 | 142 | ```html 143 | 144 |
145 | 152 | ``` 153 | 154 | ## Stopping Event Propagation 155 | Passing `true` to the on/off methods will enable the silent option to prevent the control from propagating the change event in 156 | cases where you want to update the controls on/off state, but do not want to fire the onChange event. 157 | 158 | ```html 159 | 160 | 161 | 162 | 163 | 164 | 178 | ``` 179 | 180 | ## API vs Input 181 | This also means that using the API or Input to trigger events will work both ways. 182 | 183 | ```html 184 | 185 | 186 | 187 | 188 | 189 | 203 | ``` 204 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap4-toggle", 3 | "description": "Bootstrap 4 Toggle is a Bootstrap plugin/widget that converts checkboxes into toggles", 4 | "version": "3.4.0", 5 | "keywords": [ 6 | "bootstrap", 7 | "bootstrap4", 8 | "bootstrap 4", 9 | "bootstrap 4 switch", 10 | "bootstrap 4 toggle", 11 | "bootstrap-switch", 12 | "bootstrap-toggle", 13 | "bootstrap4-toggle", 14 | "toggle" 15 | ], 16 | "homepage": "https://gitbrent.github.io/bootstrap4-toggle/", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/gitbrent/bootstrap4-toggle.git" 20 | }, 21 | "license": "MIT", 22 | "author": { 23 | "name": "Brent Ely", 24 | "url": "https://github.com/gitbrent/" 25 | }, 26 | "main": [ 27 | "./js/bootstrap4-toggle.js", 28 | "./css/bootstrap4-toggle.css" 29 | ], 30 | "ignore": [ 31 | "**/.*", 32 | "node_modules", 33 | "bower_components", 34 | "test", 35 | "tests" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /css/bootstrap4-toggle.css: -------------------------------------------------------------------------------- 1 | /*\ 2 | |*| ======================================================================== 3 | |*| Bootstrap Toggle: bootstrap4-toggle.css v3.7.0 4 | |*| https://gitbrent.github.io/bootstrap4-toggle/ 5 | |*| ======================================================================== 6 | |*| Copyright 2018-2019 Brent Ely 7 | |*| Licensed under MIT 8 | |*| ======================================================================== 9 | \*/ 10 | 11 | /* 12 | * @added 3.0.0: Return support for "*-xs" removed in Bootstrap-4 13 | * @see: [Comment](https://github.com/twbs/bootstrap/issues/21881#issuecomment-341972830) 14 | */ 15 | .btn-group-xs > .btn, .btn-xs { 16 | padding: .35rem .4rem .25rem .4rem; 17 | font-size: .875rem; 18 | line-height: .5; 19 | border-radius: .2rem; 20 | } 21 | 22 | .checkbox label .toggle, .checkbox-inline .toggle { 23 | margin-left: -1.25rem; 24 | margin-right: .35rem; 25 | } 26 | 27 | .toggle { 28 | position: relative; 29 | overflow: hidden; 30 | } 31 | .toggle.btn.btn-light, .toggle.btn.btn-outline-light { 32 | /* bootstrap-4 - add a border so toggle is delineated */ 33 | border-color: rgba(0, 0, 0, .15); 34 | } 35 | .toggle input[type="checkbox"] { 36 | display: none; 37 | } 38 | .toggle-group { 39 | position: absolute; 40 | width: 200%; 41 | top: 0; 42 | bottom: 0; 43 | left: 0; 44 | transition: left 0.35s; 45 | -webkit-transition: left 0.35s; 46 | -moz-user-select: none; 47 | -webkit-user-select: none; 48 | } 49 | .toggle-group label, .toggle-group span { cursor: pointer; } 50 | .toggle.off .toggle-group { 51 | left: -100%; 52 | } 53 | .toggle-on { 54 | position: absolute; 55 | top: 0; 56 | bottom: 0; 57 | left: 0; 58 | right: 50%; 59 | margin: 0; 60 | border: 0; 61 | border-radius: 0; 62 | } 63 | .toggle-off { 64 | position: absolute; 65 | top: 0; 66 | bottom: 0; 67 | left: 50%; 68 | right: 0; 69 | margin: 0; 70 | border: 0; 71 | border-radius: 0; 72 | box-shadow: none; /* Bootstrap 4.0 Support via (Issue #186)[https://github.com/minhur/bootstrap-toggle/issues/186]) */ 73 | } 74 | .toggle-handle { 75 | position: relative; 76 | margin: 0 auto; 77 | padding-top: 0px; 78 | padding-bottom: 0px; 79 | height: 100%; 80 | width: 0px; 81 | border-width: 0 1px; 82 | background-color: #fff; 83 | } 84 | 85 | .toggle.btn-outline-primary .toggle-handle { 86 | background-color: var(--primary); 87 | border-color: var(--primary); 88 | } 89 | .toggle.btn-outline-secondary .toggle-handle { 90 | background-color: var(--secondary); 91 | border-color: var(--secondary); 92 | } 93 | .toggle.btn-outline-success .toggle-handle { 94 | background-color: var(--success); 95 | border-color: var(--success); 96 | } 97 | .toggle.btn-outline-danger .toggle-handle { 98 | background-color: var(--danger); 99 | border-color: var(--danger); 100 | } 101 | .toggle.btn-outline-warning .toggle-handle { 102 | background-color: var(--warning); 103 | border-color: var(--warning); 104 | } 105 | .toggle.btn-outline-info .toggle-handle { 106 | background-color: var(--info); 107 | border-color: var(--info); 108 | } 109 | .toggle.btn-outline-light .toggle-handle { 110 | background-color: var(--light); 111 | border-color: var(--light); 112 | } 113 | .toggle.btn-outline-dark .toggle-handle { 114 | background-color: var(--dark); 115 | border-color: var(--dark); 116 | } 117 | .toggle[class*="btn-outline"]:hover .toggle-handle { 118 | background-color: var(--light); 119 | opacity: 0.5; 120 | } 121 | 122 | /* NOTE: Must come first, so classes below override as needed */ 123 | /* [default] (bootstrap-4.1.3 - .btn - h:38px) */ 124 | .toggle.btn { min-width: 3.7rem; min-height: 2.15rem; } 125 | .toggle-on.btn { padding-right: 1.5rem; } 126 | .toggle-off.btn { padding-left: 1.5rem; } 127 | 128 | /* `lg` (bootstrap-4.1.3 - .btn - h:48px) */ 129 | .toggle.btn-lg { min-width: 5rem; min-height: 2.815rem; } 130 | .toggle-on.btn-lg { padding-right: 2rem; } 131 | .toggle-off.btn-lg { padding-left: 2rem; } 132 | .toggle-handle.btn-lg { width: 2.5rem; } 133 | 134 | /* `sm` (bootstrap-4.1.3 - .btn - h:31px) */ 135 | .toggle.btn-sm { min-width: 3.125rem; min-height: 1.938rem; } 136 | .toggle-on.btn-sm { padding-right: 1rem; } 137 | .toggle-off.btn-sm { padding-left: 1rem; } 138 | 139 | /* `xs` (bootstrap-3.3 - .btn - h:22px) */ 140 | .toggle.btn-xs { min-width: 2.19rem; min-height: 1.375rem; } 141 | .toggle-on.btn-xs { padding-right: .8rem; } 142 | .toggle-off.btn-xs { padding-left: .8rem; } 143 | -------------------------------------------------------------------------------- /css/bootstrap4-toggle.min.css: -------------------------------------------------------------------------------- 1 | /*\ 2 | |*| ======================================================================== 3 | |*| Bootstrap Toggle: bootstrap4-toggle.css v3.6.1 4 | |*| https://gitbrent.github.io/bootstrap4-toggle/ 5 | |*| ======================================================================== 6 | |*| Copyright 2018-2019 Brent Ely 7 | |*| Licensed under MIT 8 | |*| ======================================================================== 9 | \*/ 10 | .btn-group-xs>.btn,.btn-xs{padding:.35rem .4rem .25rem .4rem;font-size:.875rem;line-height:.5;border-radius:.2rem}.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-1.25rem;margin-right:.35rem}.toggle{position:relative;overflow:hidden}.toggle.btn.btn-light,.toggle.btn.btn-outline-light{border-color:rgba(0,0,0,.15)}.toggle input[type=checkbox]{display:none}.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}.toggle-group label,.toggle-group span{cursor:pointer}.toggle.off .toggle-group{left:-100%}.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0;box-shadow:none}.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px;background-color:#fff}.toggle.btn-outline-primary .toggle-handle{background-color:var(--primary);border-color:var(--primary)}.toggle.btn-outline-secondary .toggle-handle{background-color:var(--secondary);border-color:var(--secondary)}.toggle.btn-outline-success .toggle-handle{background-color:var(--success);border-color:var(--success)}.toggle.btn-outline-danger .toggle-handle{background-color:var(--danger);border-color:var(--danger)}.toggle.btn-outline-warning .toggle-handle{background-color:var(--warning);border-color:var(--warning)}.toggle.btn-outline-info .toggle-handle{background-color:var(--info);border-color:var(--info)}.toggle.btn-outline-light .toggle-handle{background-color:var(--light);border-color:var(--light)}.toggle.btn-outline-dark .toggle-handle{background-color:var(--dark);border-color:var(--dark)}.toggle[class*=btn-outline]:hover .toggle-handle{background-color:var(--light);opacity:.5}.toggle.btn{min-width:3.7rem;min-height:2.15rem}.toggle-on.btn{padding-right:1.5rem}.toggle-off.btn{padding-left:1.5rem}.toggle.btn-lg{min-width:5rem;min-height:2.815rem}.toggle-on.btn-lg{padding-right:2rem}.toggle-off.btn-lg{padding-left:2rem}.toggle-handle.btn-lg{width:2.5rem}.toggle.btn-sm{min-width:3.125rem;min-height:1.938rem}.toggle-on.btn-sm{padding-right:1rem}.toggle-off.btn-sm{padding-left:1rem}.toggle.btn-xs{min-width:2.19rem;min-height:1.375rem}.toggle-on.btn-xs{padding-right:.8rem}.toggle-off.btn-xs{padding-left:.8rem} 11 | -------------------------------------------------------------------------------- /doc/bootstrap4-toggle-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitbrent/bootstrap4-toggle/38211b945de6e69ed8c90b13be1a0ef65ff75f6a/doc/bootstrap4-toggle-demo.gif -------------------------------------------------------------------------------- /doc/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitbrent/bootstrap4-toggle/38211b945de6e69ed8c90b13be1a0ef65ff75f6a/doc/header.png -------------------------------------------------------------------------------- /doc/script.js: -------------------------------------------------------------------------------- 1 | +function ($) { 2 | 'use strict'; 3 | 4 | $('.example:not(.skip)').each(function() { 5 | // fetch & encode html 6 | var html = $('
').text($(this).html()).html() 7 | // find number of space/tabs on first line (minus line break) 8 | var count = html.match(/^(\s+)/)[0].length - 1 9 | // replace tabs/spaces on each lines with 10 | var regex = new RegExp('\\n\\s{'+count+'}', 'g') 11 | var code = html.replace(regex, '\n').replace(/\t/g, ' ').trim() 12 | // other cleanup 13 | code = code.replace(/=""/g,'') 14 | // add code block to dom 15 | $(this).after( $('').html(code) ) 16 | }); 17 | 18 | $('code.highlight').each(function() { 19 | hljs.highlightBlock(this) 20 | }); 21 | 22 | }(jQuery); 23 | 24 | var Demo = function () {} 25 | 26 | Demo.prototype.init = function(selector) { 27 | $(selector).bootstrapToggle(selector) 28 | } 29 | Demo.prototype.destroy = function(selector) { 30 | $(selector).bootstrapToggle('destroy') 31 | } 32 | Demo.prototype.on = function(selector) { 33 | $(selector).bootstrapToggle('on') 34 | } 35 | Demo.prototype.off = function(selector) { 36 | $(selector).bootstrapToggle('off') 37 | } 38 | Demo.prototype.toggle = function(selector) { 39 | $(selector).bootstrapToggle('toggle') 40 | } 41 | Demo.prototype.enable = function(selector) { 42 | $(selector).bootstrapToggle('enable') 43 | } 44 | Demo.prototype.disable = function(selector) { 45 | $(selector).bootstrapToggle('disable') 46 | } 47 | 48 | 49 | demo = new Demo() 50 | -------------------------------------------------------------------------------- /doc/stylesheet.css: -------------------------------------------------------------------------------- 1 | header { 2 | padding: 20px; 3 | background-image: url('header.png'); 4 | background-size: 256px 256px; 5 | } 6 | footer { 7 | text-align: center; 8 | } 9 | .nyt-logo { 10 | max-height: 40px; 11 | margin-top: 5px; 12 | margin-right: 5px; 13 | } 14 | 15 | nav.navbar { 16 | margin-bottom: 10px; 17 | background-color: #fff; 18 | border: 0px; 19 | border-radius: 2px; 20 | } 21 | #navbar { 22 | margin: 0px; 23 | } 24 | #navbar .navbar-nav li iframe { 25 | margin-top: 15px; 26 | } 27 | #navbar .navbar-nav li:last-child iframe { 28 | margin-right: 15px; 29 | } 30 | 31 | @media screen and (max-width: 767px) { 32 | #navbar .navbar-nav li iframe { 33 | display: none; 34 | } 35 | } 36 | 37 | .mast-head { 38 | margin: 10px 0; 39 | } 40 | .mast-head h1 { 41 | margin-bottom: 15px; 42 | color: #fff; 43 | } 44 | .mast-head p { 45 | color: #fff; 46 | } 47 | 48 | .mast-links { 49 | padding-top: 10px; 50 | } 51 | 52 | .mast-links > * { 53 | vertical-align: middle; 54 | margin-bottom: 10px; 55 | } 56 | 57 | .mast-links > .btn { 58 | margin-right: 30px; 59 | } 60 | main { 61 | margin: 10px 20px; 62 | } 63 | main .container { 64 | margin-bottom: 40px; 65 | } 66 | 67 | code.hljs { 68 | border: 1px solid #ccc; 69 | padding: 1em; 70 | white-space: pre; 71 | margin-bottom: 10px; 72 | } 73 | 74 | .example { 75 | position: relative; 76 | border: 1px solid #ccc; 77 | padding: 1em 1em 0.5em 1em; 78 | border-radius: 4px 4px 0 0; 79 | } 80 | 81 | .example:after { 82 | content: "Example"; 83 | position: absolute; 84 | top: 0px; 85 | right: 0px; 86 | padding: 3px 7px; 87 | font-size: 12px; 88 | font-weight: bold; 89 | background-color: #f5f5f5; 90 | border: 1px solid #ccc; 91 | color: #9da0a4; 92 | border-radius: 0px 4px 0px 4px; 93 | border-width: 0px 0px 1px 1px; 94 | } 95 | 96 | .example + code.hljs { 97 | border-top: 0; 98 | border-radius: 0px 0px 4px 4px; 99 | } 100 | 101 | .example > * { 102 | margin-bottom: 10px; 103 | } 104 | 105 | .example > div.toggle { 106 | margin-right: 10px; 107 | } 108 | 109 | .table-striped code { 110 | background-color: inherit; 111 | } 112 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Bootstrap 4 Toggle Switch Button Checkbox 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 43 |
44 |
45 |

Bootstrap Switch Button

46 |

Bootstrap Toggle is a jQuery plugin/widget that converts plain checkboxes into responsive toggle switch buttons.

47 | 51 |
52 |
53 |
54 |
55 |
56 | 96 |
97 | 98 |
99 |

Installation

100 |
101 | 102 |

CDN

103 | <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"> 104 | <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script> 105 | 106 |

Download

107 | GitHub Latest release 108 | 109 |

NPM

110 | npm install bootstrap4-toggle 111 | 112 |

Yarn

113 | yarn add bootstrap4-toggle 114 |
115 | 116 |
117 |

Demos

118 |
119 | 120 |

Sizes

121 |

Bootstrap toggle is available in different sizes.

122 |
123 | 124 | 125 | 126 | 127 |
128 | 129 |

Custom Sizes

130 |

Bootstrap toggle can handle custom sizes by data-width and data-height options.

131 |
132 | 133 | 134 | 135 |
136 | 137 |

Colors

138 |

Bootstrap Toggle implements all standard bootstrap 4 button colors.

139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 |
149 | 150 |

Outline Colors

151 |

Bootstrap Toggle implements all standard bootstrap 4 button outline colors.

152 |
153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
162 | 163 |

Dark Theme Colors

164 |

Bootstrap Toggle colors look great on dark backgrounds.

165 |
166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 |
175 | 176 |

Dark Theme Outline Colors

177 |

Bootstrap Toggle outline colors look great on dark backgrounds.

178 |
179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 |
188 | 189 |

Custom Style

190 |

Style the buttons to fit an existing UX.

191 |
192 | 193 | 197 | 198 | 199 | 203 | 204 |
205 | 206 |

Custom Text

207 |

The text can be changed easily with attributes or options.

208 |
209 | 210 |
211 | 212 |

HTML, Icons, Images

213 |

You can easily add icons or images since html is supported for on/off text.

214 |
215 | 216 |
217 | 218 |

Multiple Lines of Text

219 |

Toggles with multiple lines will adjust its heights.

220 |
221 | 222 |
223 | 224 |

Animation Speed

225 |

Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.

226 |
227 | 232 | 233 | 234 | 235 |
236 | 237 |

Stacked checkboxes

238 |

Simply add data-toggle="toggle" to convert checkboxes into toggles.

239 |
240 |
241 | 242 | 243 |
244 |
245 | 246 | 247 |
248 |
249 | 250 |

Inline Checkboxes

251 |

Simply add data-toggle="toggle" to a convert checkboxes into toggles.

252 |
253 |
254 | 255 | 256 |
257 |
258 | 259 | 260 |
261 |
262 |
263 | 264 |
265 |

Usage

266 |
267 | 268 |

Initialize with HTML

269 |

Simply add data-toggle="toggle" to convert checkboxes into toggles.

270 |
271 | 272 |
273 | 274 |

Initialize with JavaScript

275 |

Simply call the bootstrapToggle method to convert checkboxes into toggles. See Options for additional colors, etc.

276 |
277 | 278 | 281 |
282 |
283 | 284 |
285 |

API

286 |
287 | 288 |

Options

289 |

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".

290 |
291 | 292 | 293 | 301 |
302 |
303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 334 | 335 | 336 | 337 | 338 | 339 | 344 | 345 | 346 | 347 | 348 | 349 | 355 | 356 | 357 | 358 | 359 | 360 | 364 | 365 | 366 | 367 | 368 | 369 | 373 | 374 | 375 | 376 | 377 | 378 | 382 | 383 | 384 |
NameTypeDefaultDescription
onstring | html"On"Text of the on toggle label.
offstring | html"Off"Text of the off toggle label.
onstylestring"primary" 330 | Style of the on toggle.
Possible values are: 331 | primary, secondary, success, danger, warning, info, light, dark
332 | Refer to Bootstrap Button Options documentation for more information. 333 |
offstylestring"light" 340 | Style of the off toggle.
Possible values are: 341 | primary, secondary, success, danger, warning, info, light, dark
342 | Refer to Bootstrap Button Options documentation for more information. 343 |
sizestringnull 350 | Size of the toggle. If set to null, button is default/normal size.
351 | Possible values are: 352 | lg, sm, xs
353 | Refer to Bootstrap Button Sizes documentation for more information. 354 |
stylestringnull 361 | Appends the provided value to the toggle's class attribute. 362 | Use this to apply custom styles to the toggle. 363 |
widthintegernull 370 | Sets the width of the toggle.
371 | If set to null, width will be calculated. 372 |
heightintegernull 379 | Sets the height of the toggle.
380 | If set to null, height will be calculated. 381 |
385 |
386 | 387 |

Methods

388 |

Methods can be used to control toggles directly.

389 |
390 | 391 |
392 |
393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 |
MethodExampleDescriptionDemo
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
447 |
448 | 449 |

Checked State

450 |

You can determine the checked state of a toggle using the `checked` property.

451 |
452 | 453 |
454 |
455 | 456 |
457 |

458 |

Use the element property for checked state
459 | document.getElementById('toggle-state').checked 460 |
Returns true/false
461 |

462 |
463 | 464 |
465 |

Events

466 |
467 | 468 |

Event Propagation

469 |

470 |

Notes
471 | • All events are propagated to and from input element to the toggle.
472 | • Listen for events on the <input type="checkbox"> directly as the toggle stays synced with the input. 473 |

474 |
475 | 476 |
477 | 484 |
485 |

Stopping Event Propagation

486 |

487 | Passing true to the on/off methods will enable the silent option to prevent the control from propagating the change event in 488 | cases where you want to update the controls on/off state, but do not want to fire the onChange event. 489 |

490 |
491 | 492 | 493 | 494 | 495 | 496 | 510 |
511 |
512 | 513 |

API vs Input

514 |

This also means that using the API or Input to trigger events will work both ways.

515 |
516 | 517 | 518 | 519 | 520 | 521 | 535 |
536 |
537 |
538 |
539 |
540 |

541 | Original by Min Hur | 542 | Updated by Brent Ely | 543 | Available on GitHub | 544 | Licensed MIT 545 |

546 |

547 | 548 | 549 |

550 |
551 |
552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 566 | 567 | 568 | 575 | 576 | 577 | -------------------------------------------------------------------------------- /js/bootstrap4-toggle.js: -------------------------------------------------------------------------------- 1 | /*\ 2 | |*| ======================================================================== 3 | |*| Bootstrap Toggle: bootstrap4-toggle.js v3.7.0 4 | |*| https://gitbrent.github.io/bootstrap4-toggle/ 5 | |*| ======================================================================== 6 | |*| Copyright 2018-2019 Brent Ely 7 | |*| Licensed under MIT 8 | |*| ======================================================================== 9 | \*/ 10 | 11 | +function ($) { 12 | 'use strict'; 13 | 14 | // TOGGLE PUBLIC CLASS DEFINITION 15 | // ============================== 16 | 17 | var Toggle = function (element, options) { 18 | this.$element = $(element) 19 | this.options = $.extend({}, this.defaults(), options) 20 | this.render() 21 | } 22 | 23 | Toggle.VERSION = '3.7.0-beta' 24 | 25 | Toggle.DEFAULTS = { 26 | on: 'On', 27 | off: 'Off', 28 | onstyle: 'primary', 29 | offstyle: 'light', 30 | size: 'normal', 31 | style: '', 32 | width: null, 33 | height: null 34 | } 35 | 36 | Toggle.prototype.defaults = function() { 37 | return { 38 | on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, 39 | off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, 40 | onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, 41 | offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, 42 | size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, 43 | style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, 44 | width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, 45 | height: this.$element.attr('data-height') || Toggle.DEFAULTS.height 46 | } 47 | } 48 | 49 | Toggle.prototype.render = function () { 50 | this._onstyle = 'btn-' + this.options.onstyle 51 | this._offstyle = 'btn-' + this.options.offstyle 52 | var size 53 | = this.options.size === 'large' || this.options.size === 'lg' ? 'btn-lg' 54 | : this.options.size === 'small' || this.options.size === 'sm' ? 'btn-sm' 55 | : this.options.size === 'mini' || this.options.size === 'xs' ? 'btn-xs' 56 | : '' 57 | var $toggleOn = $('