bootstrap5-toggle 3.7.3 → 3.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +94 -32
- package/README.md +155 -119
- package/css/bootstrap5-toggle.css +1 -1
- package/css/bootstrap5-toggle.min.css +1 -1
- package/js/bootstrap5-toggle.ecmas.js +410 -334
- package/js/bootstrap5-toggle.ecmas.min.js +2 -2
- package/js/bootstrap5-toggle.ecmas.min.js.map +1 -1
- package/js/bootstrap5-toggle.js +365 -315
- package/js/bootstrap5-toggle.min.js +2 -2
- package/js/bootstrap5-toggle.min.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# Changelog
|
|
2
|
+
|
|
2
3
|
All notable changes to this project will be documented in this file.
|
|
3
4
|
|
|
4
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
@@ -6,107 +7,168 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
6
7
|
|
|
7
8
|
## Unreleased
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
### [Full Changelog](https://github.com/palcarazm/bootstrap5-toggle/compare/v3.7.4...v3)
|
|
11
|
+
|
|
12
|
+
## [3.7.4](https://github.com/palcarazm/bootstrap5-toggle/tree/v3.7.4) 2022-12-19
|
|
13
|
+
|
|
14
|
+
### [Full Changelog](https://github.com/palcarazm/bootstrap5-toggle/compare/v3.7.3....v3.7.4)
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
|
|
18
|
+
- fix: Remove attribute for if there is no ID Fixes (#80)
|
|
19
|
+
|
|
20
|
+
### Bump
|
|
21
|
+
|
|
22
|
+
- bump: Bump cypress from v10.3.0 to v12.1.0
|
|
23
|
+
- bump: Bump Jquery from v3.6.0 to v3.6.2
|
|
24
|
+
|
|
25
|
+
## [3.7.3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3.7.3) 2022-10-09
|
|
26
|
+
|
|
27
|
+
### [Full Changelog](https://github.com/palcarazm/bootstrap5-toggle/compare/v3.7.2...v3.7.3)
|
|
28
|
+
|
|
11
29
|
### Fixed
|
|
30
|
+
|
|
12
31
|
fix: Handle's background color of outline toggles on hover or focus (#71)
|
|
13
32
|
|
|
14
|
-
## [3.7.2](https://github.com/
|
|
15
|
-
|
|
33
|
+
## [3.7.2](https://github.com/palcarazm/bootstrap5-toggle/tree/v3.7.2) 2022-10-07
|
|
34
|
+
|
|
35
|
+
### [Full Changelog](https://github.com/palcarazm/bootstrap5-toggle/compare/v3.7.1...v3.7.2)
|
|
36
|
+
|
|
16
37
|
### Changed
|
|
17
|
-
* refactor: More specific CSS selectors
|
|
18
38
|
|
|
19
|
-
|
|
20
|
-
|
|
39
|
+
- refactor: More specific CSS selectors
|
|
40
|
+
|
|
41
|
+
## [3.7.1](https://github.com/palcarazm/bootstrap5-toggle/tree/v3.7.1) 2022-08-09
|
|
42
|
+
|
|
43
|
+
### [Full Changelog](https://github.com/palcarazm/bootstrap5-toggle/compare/v3.7.0...v3.7.1)
|
|
44
|
+
|
|
21
45
|
### Fixed
|
|
22
|
-
* fix: Transparent inner border (#55) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/57
|
|
23
|
-
* fix: In input-group corners aren't rendered as expected (#54) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/59
|
|
24
46
|
|
|
25
|
-
|
|
26
|
-
|
|
47
|
+
- fix: Transparent inner border (#55) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/57
|
|
48
|
+
- fix: In input-group corners aren't rendered as expected (#54) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/59
|
|
49
|
+
|
|
50
|
+
## [3.7.0](https://github.com/palcarazm/bootstrap5-toggle/tree/v3.7.0) 2022-08-01
|
|
51
|
+
|
|
52
|
+
### [Full Changelog](https://github.com/palcarazm/bootstrap5-toggle/compare/v3.6.0...v3.7.0)
|
|
53
|
+
|
|
27
54
|
### Added
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
55
|
+
|
|
56
|
+
- feat: Distribution of ECMAS lib (#2) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/36
|
|
57
|
+
- feat: Support readonly attribute (#35) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/37
|
|
58
|
+
- feat: Toggles focusable from the keyboard (#38) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/41
|
|
59
|
+
- feat: Switch toggle from keyboard (#39) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/42
|
|
60
|
+
- feat: Custom value for on and off state on form submit (#34) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/43
|
|
61
|
+
- feat: Tristate toggle (#40) by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/47
|
|
62
|
+
- feat: Support toggle silent method by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/30
|
|
63
|
+
|
|
35
64
|
### Changed
|
|
36
|
-
|
|
37
|
-
|
|
65
|
+
|
|
66
|
+
- feat: Remove btn-light from handle by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/21
|
|
67
|
+
- feat: Change default btn off class to secondary by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/22
|
|
68
|
+
|
|
38
69
|
### Fixed
|
|
39
|
-
|
|
40
|
-
|
|
70
|
+
|
|
71
|
+
- fix: Handle border color and btn-light border color by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/17
|
|
72
|
+
- fix: Render in input-group by @palcarazm in https://github.com/palcarazm/bootstrap5-toggle/pull/29
|
|
41
73
|
|
|
42
74
|
## [3.6.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.6.0) 2019-10-17
|
|
75
|
+
|
|
43
76
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.5.0...v3.6.0)
|
|
77
|
+
|
|
44
78
|
### Added
|
|
79
|
+
|
|
45
80
|
- 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))
|
|
46
81
|
- Added accessibility properties to labels [\#11](https://github.com/gitbrent/bootstrap4-toggle/issue/11) ([aproquot](https://github.com/aproquot))
|
|
82
|
+
|
|
47
83
|
### Changed
|
|
84
|
+
|
|
48
85
|
- Fixed URLs in js and css file top comment [\#5](https://github.com/gitbrent/bootstrap4-toggle/issue/5) ([wilecoyte78](https://github.com/wilecoyte78))
|
|
49
86
|
- Disable style is not working [\#18](https://github.com/gitbrent/bootstrap4-toggle/issue/18) ([rychlym](https://github.com/rychlym))
|
|
50
87
|
|
|
51
88
|
## [3.5.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.5.0) 2019-07-02
|
|
89
|
+
|
|
52
90
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.4.0...v3.5.0)
|
|
91
|
+
|
|
53
92
|
### Added
|
|
93
|
+
|
|
54
94
|
- Added ARIA `role="button"` tag to toggle
|
|
55
95
|
- Added `cursor: pointer;` style to toggle
|
|
96
|
+
|
|
56
97
|
### Changed
|
|
98
|
+
|
|
57
99
|
- Fixed: Touch not working on mobile [\#2](https://github.com/gitbrent/bootstrap4-toggle/issue/2) ([wilecoyte78](https://github.com/wilecoyte78))
|
|
58
100
|
- Updated to Bootstrap version 4.3.1
|
|
59
101
|
- Updated README with better Yarn instructions
|
|
60
102
|
|
|
61
103
|
## [3.4.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.4.0) 2019-01-03
|
|
104
|
+
|
|
62
105
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.3.0...v3.4.0)
|
|
106
|
+
|
|
63
107
|
### Added
|
|
108
|
+
|
|
64
109
|
- Outline button styles are now available
|
|
110
|
+
|
|
65
111
|
### Changed
|
|
112
|
+
|
|
66
113
|
- Updated to Bootstrap version 4.2.1
|
|
67
114
|
|
|
68
115
|
## [3.3.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.3.0) 2018-12-19
|
|
116
|
+
|
|
69
117
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.2.0...v3.3.0)
|
|
118
|
+
|
|
70
119
|
### Added
|
|
120
|
+
|
|
71
121
|
- New test created to compare core bootstrap sizes to bootstrap4-toggle
|
|
122
|
+
|
|
72
123
|
### Changed
|
|
124
|
+
|
|
73
125
|
- Introduced new `size` values that mirror bootstrap 4: (`lg`, `sm`, `xs`)
|
|
74
126
|
- Converted all css units from `px` to `rem`
|
|
75
127
|
- Properly added border on `light` button (moved from .toggle class)
|
|
128
|
+
|
|
76
129
|
### Removed
|
|
77
|
-
**DEPRECATED** Classic `size` values (`large`, `small`, `mini`)
|
|
78
130
|
|
|
131
|
+
**DEPRECATED** Classic `size` values (`large`, `small`, `mini`)
|
|
79
132
|
|
|
80
133
|
## [3.2.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.2.0) 2018-11-27
|
|
134
|
+
|
|
81
135
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0)
|
|
136
|
+
|
|
82
137
|
### Added
|
|
138
|
+
|
|
83
139
|
### Changed
|
|
84
|
-
- Removed permanent `active` state from "Off" label so mouse-over highlighting works the same as "On"
|
|
85
|
-
### Removed
|
|
86
140
|
|
|
141
|
+
- Removed permanent `active` state from "Off" label so mouse-over highlighting works the same as "On"
|
|
87
142
|
|
|
143
|
+
### Removed
|
|
88
144
|
|
|
89
145
|
## [3.1.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.1.0) 2018-10-25
|
|
146
|
+
|
|
90
147
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0)
|
|
148
|
+
|
|
91
149
|
### Added
|
|
150
|
+
|
|
92
151
|
- `index.html` includes new section with dark mode colors
|
|
152
|
+
|
|
93
153
|
### Changed
|
|
154
|
+
|
|
94
155
|
- `index.html` now fully responsive, better menu, rearranged sections
|
|
95
156
|
- Tweaked `border` property to work with all backgrounds and colors
|
|
96
|
-
### Removed
|
|
97
|
-
|
|
98
157
|
|
|
158
|
+
### Removed
|
|
99
159
|
|
|
100
160
|
## [3.0.0](https://github.com/gitbrent/bootstrap4-toggle/tree/v3.0.0) 2018-10-21
|
|
161
|
+
|
|
101
162
|
### [Full Changelog](https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0)
|
|
163
|
+
|
|
102
164
|
### Added
|
|
165
|
+
|
|
103
166
|
- Touch support
|
|
167
|
+
|
|
104
168
|
### Changed
|
|
169
|
+
|
|
105
170
|
- Implements Bootstrap 4 colors/styles
|
|
171
|
+
|
|
106
172
|
### Removed
|
|
107
|
-
- Old Bootstrap 2 files
|
|
108
173
|
|
|
109
|
-
|
|
110
|
-
[3.2.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.1.0...v3.2.0
|
|
111
|
-
[3.1.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v3.0.0...v3.1.0
|
|
112
|
-
[3.0.0]: https://github.com/gitbrent/bootstrap4-toggle/compare/v2.2.2...v3.0.0
|
|
174
|
+
- Old Bootstrap 2 files
|
package/README.md
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
[](https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE)
|
|
2
|
-
[](https://github.com/palcarazm/bootstrap5-toggle/graphs/contributors)
|
|
1
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE)
|
|
2
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/releases)
|
|
3
|
+
[](https://getbootstrap.com/docs/4.0)
|
|
4
|
+
[](https://www.jsdelivr.com/package/npm/bootstrap5-toggle)
|
|
5
|
+
[](https://www.npmjs.com/package/bootstrap5-toggle)
|
|
6
|
+
[](https://snyk.io/advisor/npm-package/bootstrap5-toggle)
|
|
7
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/security/policy)
|
|
9
8
|
[](https://github.com/sponsors/palcarazm)
|
|
10
9
|
[](https://openbase.com/js/bootstrap5-toggle?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/bootstrap5-toggle)
|
|
11
10
|
|
|
@@ -13,20 +12,23 @@
|
|
|
13
12
|
|
|
14
13
|
**Bootstrap 5 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles.
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
---
|
|
17
16
|
|
|
18
17
|
#### Library Distributions
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
[bootstrap5-toggle
|
|
18
|
+
|
|
19
|
+
| Branch | Bootstrap Support | Last Release |
|
|
20
|
+
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| [bootstrap5-toggle v4](https://github.com/palcarazm/bootstrap5-toggle/tree/v4) | [](https://getbootstrap.com/docs/5.0) | [](https://github.com/palcarazm/bootstrap5-toggle/releases) |
|
|
22
|
+
| [bootstrap5-toggle v3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3) | [](https://getbootstrap.com/docs/4.0) | [](https://github.com/palcarazm/bootstrap5-toggle/releases) |
|
|
23
23
|
|
|
24
24
|
# Demos
|
|
25
|
-
|
|
25
|
+
|
|
26
|
+
**Demos and API Docs:** https://palcarazm.github.io/bootstrap5-toggle/v3
|
|
26
27
|
|
|
27
28
|
|
|
28
29
|
|
|
29
|
-
# Related Bootstrap
|
|
30
|
+
# Related Bootstrap Plugins
|
|
31
|
+
|
|
30
32
|
<div align="center">
|
|
31
33
|
<a href="https://github.com/palcarazm/bs-darkmode" title="Boostrap Darkmode"
|
|
32
34
|
><img
|
|
@@ -34,84 +36,99 @@ Branch | Bootstrap Support | Last Release
|
|
|
34
36
|
/></a>
|
|
35
37
|
</div>
|
|
36
38
|
|
|
37
|
-
|
|
39
|
+
---
|
|
38
40
|
|
|
39
41
|
<!-- To update TOC run .\node_modules\.bin\doctoc README.md --github -->
|
|
40
|
-
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
41
|
-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
- [Installation](#installation)
|
|
45
|
-
- [CDN](#cdn)
|
|
46
|
-
- [jQuery Interface](#jquery-interface)
|
|
47
|
-
- [ECMAS Interface](#ecmas-interface)
|
|
48
|
-
- [Download](#download)
|
|
49
|
-
- [NPM](#npm)
|
|
50
|
-
- [Yarn](#yarn)
|
|
51
|
-
- [Usage](#usage)
|
|
52
|
-
- [Initialize With HTML](#initialize-with-html)
|
|
53
|
-
- [Initialize With Code](#initialize-with-code)
|
|
54
|
-
- [API](#api)
|
|
55
|
-
- [Options](#options)
|
|
56
|
-
- [Methods](#methods)
|
|
57
|
-
- [Events](#events)
|
|
58
|
-
- [Event Propagation](#event-propagation)
|
|
59
|
-
- [Stopping Event Propagation](#stopping-event-propagation)
|
|
60
|
-
- [API vs Input](#api-vs-input)
|
|
61
|
-
- [Collaborators welcom!](#collaborators-welcom)
|
|
62
|
-
|
|
63
|
-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
64
|
-
|
|
65
|
-
|
|
42
|
+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
43
|
+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
- [Installation](#installation)
|
|
47
|
+
- [CDN](#cdn)
|
|
48
|
+
- [jQuery Interface](#jquery-interface)
|
|
49
|
+
- [ECMAS Interface](#ecmas-interface)
|
|
50
|
+
- [Download](#download)
|
|
51
|
+
- [NPM](#npm)
|
|
52
|
+
- [Yarn](#yarn)
|
|
53
|
+
- [Usage](#usage)
|
|
54
|
+
- [Initialize With HTML](#initialize-with-html)
|
|
55
|
+
- [Initialize With Code](#initialize-with-code)
|
|
56
|
+
- [API](#api)
|
|
57
|
+
- [Options](#options)
|
|
58
|
+
- [Methods](#methods)
|
|
59
|
+
- [Events](#events)
|
|
60
|
+
- [Event Propagation](#event-propagation)
|
|
61
|
+
- [Stopping Event Propagation](#stopping-event-propagation)
|
|
62
|
+
- [API vs Input](#api-vs-input)
|
|
63
|
+
- [Collaborators welcom!](#collaborators-welcom)
|
|
64
|
+
|
|
65
|
+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
66
|
+
|
|
67
|
+
---
|
|
66
68
|
|
|
67
69
|
# Installation
|
|
68
70
|
|
|
69
71
|
## CDN
|
|
70
|
-
|
|
72
|
+
|
|
73
|
+
[](https://www.jsdelivr.com/package/npm/bootstrap5-toggle)
|
|
74
|
+
|
|
71
75
|
### jQuery Interface
|
|
76
|
+
|
|
72
77
|
```html
|
|
73
|
-
<link
|
|
74
|
-
|
|
78
|
+
<link
|
|
79
|
+
href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@3.7.4/css/bootstrap5-toggle.min.css"
|
|
80
|
+
rel="stylesheet" />
|
|
81
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@3.7.4/js/bootstrap5-toggle.min.js"></script>
|
|
75
82
|
```
|
|
76
83
|
|
|
77
84
|
### ECMAS Interface
|
|
85
|
+
|
|
78
86
|
```html
|
|
79
|
-
<link
|
|
80
|
-
|
|
87
|
+
<link
|
|
88
|
+
href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@3.7.4/css/bootstrap5-toggle.min.css"
|
|
89
|
+
rel="stylesheet" />
|
|
90
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@3.7.4/js/bootstrap5-toggle.ecmas.min.js"></script>
|
|
81
91
|
```
|
|
82
92
|
|
|
83
93
|
## Download
|
|
84
|
-
|
|
94
|
+
|
|
95
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/releases)
|
|
85
96
|
|
|
86
97
|
## NPM
|
|
87
|
-
|
|
98
|
+
|
|
99
|
+
[](https://www.npmjs.com/package/bootstrap5-toggle)
|
|
100
|
+
|
|
88
101
|
```ksh
|
|
89
|
-
npm install bootstrap5-toggle@3.7.
|
|
102
|
+
npm install bootstrap5-toggle@3.7.4
|
|
90
103
|
```
|
|
91
104
|
|
|
92
105
|
## Yarn
|
|
106
|
+
|
|
93
107
|
```ksh
|
|
94
|
-
yarn add bootstrap5-toggle@3.7.
|
|
108
|
+
yarn add bootstrap5-toggle@3.7.4
|
|
95
109
|
```
|
|
96
110
|
|
|
97
111
|
# Usage
|
|
98
112
|
|
|
99
113
|
## Initialize With HTML
|
|
114
|
+
|
|
100
115
|
Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 5 toggle.
|
|
101
116
|
|
|
102
117
|
```html
|
|
103
|
-
<input id="chkToggle" type="checkbox" data-toggle="toggle"
|
|
118
|
+
<input id="chkToggle" type="checkbox" data-toggle="toggle" />
|
|
104
119
|
```
|
|
105
120
|
|
|
106
121
|
## Initialize With Code
|
|
107
|
-
|
|
122
|
+
|
|
123
|
+
Toggles can also be initialized via JavaScript code.
|
|
108
124
|
|
|
109
125
|
EX: Initialize id `chkToggle` with a single line of JavaScript.
|
|
126
|
+
|
|
110
127
|
```html
|
|
111
|
-
<input id="chkToggle" type="checkbox" checked
|
|
128
|
+
<input id="chkToggle" type="checkbox" checked />
|
|
112
129
|
<script>
|
|
113
|
-
$(function(){
|
|
114
|
-
$(
|
|
130
|
+
$(function () {
|
|
131
|
+
$("#chkToggle").bootstrapToggle();
|
|
115
132
|
});
|
|
116
133
|
</script>
|
|
117
134
|
```
|
|
@@ -119,130 +136,149 @@ EX: Initialize id `chkToggle` with a single line of JavaScript.
|
|
|
119
136
|
# API
|
|
120
137
|
|
|
121
138
|
## Options
|
|
122
|
-
|
|
123
|
-
|
|
139
|
+
|
|
140
|
+
- Options can be passed via data attributes or JavaScript
|
|
141
|
+
- For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)
|
|
124
142
|
|
|
125
143
|
```html
|
|
126
|
-
<input
|
|
127
|
-
|
|
144
|
+
<input
|
|
145
|
+
type="checkbox"
|
|
146
|
+
data-toggle="toggle"
|
|
147
|
+
data-on="Enabled"
|
|
148
|
+
data-off="Disabled" />
|
|
149
|
+
<input type="checkbox" id="toggle-two" />
|
|
128
150
|
<script>
|
|
129
|
-
$(function() {
|
|
130
|
-
$(
|
|
131
|
-
on:
|
|
132
|
-
off:
|
|
151
|
+
$(function () {
|
|
152
|
+
$("#toggle-two").bootstrapToggle({
|
|
153
|
+
on: "Enabled",
|
|
154
|
+
off: "Disabled",
|
|
133
155
|
});
|
|
134
|
-
})
|
|
156
|
+
});
|
|
135
157
|
</script>
|
|
136
158
|
```
|
|
137
159
|
|
|
138
|
-
Name
|
|
139
|
-
|
|
140
|
-
`on`
|
|
141
|
-
`off`
|
|
142
|
-
`size`
|
|
143
|
-
`onstyle`
|
|
144
|
-
`offstyle
|
|
145
|
-
`onvalue`
|
|
146
|
-
`offvalue
|
|
147
|
-
`style`
|
|
148
|
-
`width`
|
|
149
|
-
`height`
|
|
150
|
-
`tabindex
|
|
151
|
-
`tristate
|
|
160
|
+
| Name | Type | Default | Description |
|
|
161
|
+
| ---------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
162
|
+
| `on` | string/html | "On" | Text of the on toggle |
|
|
163
|
+
| `off` | string/html | "Off" | Text of the off toggle |
|
|
164
|
+
| `size` | string | "normal" | Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`. |
|
|
165
|
+
| `onstyle` | string | "primary" | Style of the on toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |
|
|
166
|
+
| `offstyle` | string | "secondary" | Style of the off toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |
|
|
167
|
+
| `onvalue` | string | _null_ | Sets on state value |
|
|
168
|
+
| `offvalue` | string | _null_ | Sets off state value |
|
|
169
|
+
| `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. |
|
|
170
|
+
| `width` | integer | _null_ | Sets the width of the toggle. if set to _null_, width will be auto-calculated. |
|
|
171
|
+
| `height` | integer | _null_ | Sets the height of the toggle. if set to _null_, height will be auto-calculated. |
|
|
172
|
+
| `tabindex` | integer | 0 | Sets the tabindex of the toggle. |
|
|
173
|
+
| `tristate` | boolean | false | Sets tristate support |
|
|
152
174
|
|
|
153
175
|
## Methods
|
|
176
|
+
|
|
154
177
|
Methods can be used to control toggles directly.
|
|
155
178
|
|
|
156
179
|
```html
|
|
157
|
-
<input id="toggle-demo" type="checkbox" data-toggle="toggle"
|
|
180
|
+
<input id="toggle-demo" type="checkbox" data-toggle="toggle" />
|
|
158
181
|
```
|
|
159
182
|
|
|
160
|
-
Method
|
|
161
|
-
|
|
162
|
-
initialize
|
|
163
|
-
destroy
|
|
164
|
-
on
|
|
165
|
-
off
|
|
166
|
-
toggle
|
|
167
|
-
enable
|
|
168
|
-
disable
|
|
169
|
-
readonly
|
|
170
|
-
indeterminate| `$('#toggle-demo').bootstrapToggle('indeterminate')
|
|
171
|
-
determinate
|
|
183
|
+
| Method | Example | Description |
|
|
184
|
+
| ------------- | ---------------------------------------------------- | ------------------------------------------------- |
|
|
185
|
+
| initialize | `$('#toggle-demo').bootstrapToggle()` | Initializes the toggle plugin with options |
|
|
186
|
+
| destroy | `$('#toggle-demo').bootstrapToggle('destroy')` | Destroys the toggle |
|
|
187
|
+
| on | `$('#toggle-demo').bootstrapToggle('on')` | Sets the toggle to 'On' state |
|
|
188
|
+
| off | `$('#toggle-demo').bootstrapToggle('off')` | Sets the toggle to 'Off' state |
|
|
189
|
+
| toggle | `$('#toggle-demo').bootstrapToggle('toggle')` | Toggles the state of the toggle on/off |
|
|
190
|
+
| enable | `$('#toggle-demo').bootstrapToggle('enable')` | Enables the toggle |
|
|
191
|
+
| disable | `$('#toggle-demo').bootstrapToggle('disable')` | Disables the toggle |
|
|
192
|
+
| readonly | `$('#toggle-demo').bootstrapToggle('readonly')` | Disables the toggle but preserve checkbox enabled |
|
|
193
|
+
| indeterminate | `$('#toggle-demo').bootstrapToggle('indeterminate')` | Sets the toggle to 'indeterminate' state |
|
|
194
|
+
| determinate | `$('#toggle-demo').bootstrapToggle('determinate')` | Sets the toggle to 'determinate' state |
|
|
172
195
|
|
|
173
196
|
# Events
|
|
174
197
|
|
|
175
198
|
## Event Propagation
|
|
199
|
+
|
|
176
200
|
Note All events are propagated to and from input element to the toggle.
|
|
177
201
|
|
|
178
202
|
You should listen to events from the `<input type="checkbox">` directly rather than look for custom events.
|
|
179
203
|
|
|
180
204
|
```html
|
|
181
|
-
<input id="toggle-event" type="checkbox" data-toggle="toggle"
|
|
205
|
+
<input id="toggle-event" type="checkbox" data-toggle="toggle" />
|
|
182
206
|
<div id="console-event"></div>
|
|
183
207
|
<script>
|
|
184
|
-
$(function() {
|
|
185
|
-
$(
|
|
186
|
-
$(
|
|
187
|
-
})
|
|
188
|
-
})
|
|
208
|
+
$(function () {
|
|
209
|
+
$("#toggle-event").change(function () {
|
|
210
|
+
$("#console-event").html("Toggle: " + $(this).prop("checked"));
|
|
211
|
+
});
|
|
212
|
+
});
|
|
189
213
|
</script>
|
|
190
214
|
```
|
|
191
215
|
|
|
192
216
|
## Stopping Event Propagation
|
|
217
|
+
|
|
193
218
|
Passing `true` to the on, off, toggle, determinate and indeterminate methods will enable the silent option to prevent the control from propagating the change event in cases where you want to update the controls on/off state, but do not want to fire the onChange event.
|
|
194
219
|
|
|
195
220
|
```html
|
|
196
|
-
<input id="toggle-silent" type="checkbox" data-toggle="toggle"
|
|
197
|
-
<button class="btn btn-success" onclick="toggleApiOnSilent()"
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
<button class="btn btn-
|
|
221
|
+
<input id="toggle-silent" type="checkbox" data-toggle="toggle" />
|
|
222
|
+
<button class="btn btn-success" onclick="toggleApiOnSilent()">
|
|
223
|
+
On by API (silent)
|
|
224
|
+
</button>
|
|
225
|
+
<button class="btn btn-success" onclick="toggleApiOffSilent()">
|
|
226
|
+
Off by API (silent)
|
|
227
|
+
</button>
|
|
228
|
+
<button class="btn btn-warning" onclick="toggleApiOnNotSilent()">
|
|
229
|
+
On by API (not silent)
|
|
230
|
+
</button>
|
|
231
|
+
<button class="btn btn-warning" onclick="toggleApiOffNotSilent()">
|
|
232
|
+
On by API (not silent)
|
|
233
|
+
</button>
|
|
201
234
|
<script>
|
|
202
235
|
function toggleApiOnSilent() {
|
|
203
|
-
$(
|
|
236
|
+
$("#toggle-silent").bootstrapToggle("on", true);
|
|
204
237
|
}
|
|
205
238
|
function toggleApiOffSilent() {
|
|
206
|
-
$(
|
|
239
|
+
$("#toggle-silent").bootstrapToggle("off", true);
|
|
207
240
|
}
|
|
208
241
|
function toggleApiOnNotSilent() {
|
|
209
|
-
$(
|
|
242
|
+
$("#toggle-silent").bootstrapToggle("on");
|
|
210
243
|
}
|
|
211
244
|
function toggleApiOffNotSilent() {
|
|
212
|
-
$(
|
|
245
|
+
$("#toggle-silent").bootstrapToggle("off");
|
|
213
246
|
}
|
|
214
247
|
</script>
|
|
215
248
|
```
|
|
216
249
|
|
|
217
250
|
## API vs Input
|
|
251
|
+
|
|
218
252
|
This also means that using the API or Input to trigger events will work both ways.
|
|
219
253
|
|
|
220
254
|
```html
|
|
221
|
-
<input id="toggle-trigger" type="checkbox" data-toggle="toggle"
|
|
222
|
-
<button class="btn btn-success" onclick="toggleApiOn()"
|
|
223
|
-
<button class="btn btn-danger"
|
|
224
|
-
<button class="btn btn-success" onclick="toggleInpOn()"
|
|
225
|
-
<button class="btn btn-danger"
|
|
255
|
+
<input id="toggle-trigger" type="checkbox" data-toggle="toggle" />
|
|
256
|
+
<button class="btn btn-success" onclick="toggleApiOn()">On by API</button>
|
|
257
|
+
<button class="btn btn-danger" onclick="toggleApiOff()">Off by API</button>
|
|
258
|
+
<button class="btn btn-success" onclick="toggleInpOn()">On by Input</button>
|
|
259
|
+
<button class="btn btn-danger" onclick="toggleInpOff()">Off by Input</button>
|
|
226
260
|
<script>
|
|
227
261
|
function toggleApiOn() {
|
|
228
|
-
$(
|
|
262
|
+
$("#toggle-trigger").bootstrapToggle("on");
|
|
229
263
|
}
|
|
230
264
|
function toggleApiOff() {
|
|
231
|
-
$(
|
|
265
|
+
$("#toggle-trigger").bootstrapToggle("off");
|
|
232
266
|
}
|
|
233
267
|
function toggleInpOn() {
|
|
234
|
-
$(
|
|
268
|
+
$("#toggle-trigger").prop("checked", true).change();
|
|
235
269
|
}
|
|
236
270
|
function toggleInpOff() {
|
|
237
|
-
$(
|
|
271
|
+
$("#toggle-trigger").prop("checked", false).change();
|
|
238
272
|
}
|
|
239
273
|
</script>
|
|
240
274
|
```
|
|
275
|
+
|
|
241
276
|
# Collaborators welcom!
|
|
277
|
+
|
|
242
278
|
- :sos: ¿Do you need some help? Open a issue in [GitHub help wanted](https://github.com/palcarazm/bootstrap5-toggle/issues/new?assignees=&labels=help+wanted&template=help-wanted.md&title=%5BHELP%5D)
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
279
|
+
- :bug: ¿Do you find a bug? Open a issue in [GitHub bug report](https://github.com/palcarazm/bootstrap5-toggle/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BBUG%5D)
|
|
280
|
+
- :bulb: ¿Do you have a great idea? Open a issue in [GitHub feature request](https://github.com/palcarazm/bootstrap5-toggle/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BFEATURE%5D)
|
|
281
|
+
- :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bootstrap5-toggle/compare).
|
|
246
282
|
|
|
247
283
|
[](https://github.com/palcarazm/bootstrap5-toggle/graphs/contributors)
|
|
248
284
|
|