bootstrap5-toggle 4.3.4 → 4.3.6
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 +126 -43
- package/LICENSE +23 -23
- package/README.md +137 -94
- 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 +3 -2
package/README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
[](https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE)
|
|
2
|
-
[](https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE)
|
|
2
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/releases)
|
|
3
|
+
[](https://getbootstrap.com/docs/5.0)
|
|
4
|
+
[](https://www.jsdelivr.com/package/npm/bootstrap5-toggle)
|
|
5
|
+
[](https://www.npmjs.com/package/bootstrap5-toggle)
|
|
6
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/actions?query=workflow%3A%22Build+Check%22)
|
|
7
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/actions?query=workflow%3A%22Cypress+Tests%22)
|
|
8
|
+
[](https://snyk.io/advisor/npm-package/bootstrap5-toggle)
|
|
9
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/security/policy)
|
|
8
10
|
[](https://github.com/sponsors/palcarazm)
|
|
9
11
|
[](https://openbase.com/js/bootstrap5-toggle?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/bootstrap5-toggle)
|
|
10
12
|
|
|
@@ -12,20 +14,23 @@
|
|
|
12
14
|
|
|
13
15
|
**Bootstrap 5 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles.
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
---
|
|
16
18
|
|
|
17
19
|
#### Library Distributions
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
[bootstrap5-toggle
|
|
20
|
+
|
|
21
|
+
| Branch | Bootstrap Support | Last Release |
|
|
22
|
+
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
23
|
+
| [bootstrap5-toggle v4](https://github.com/palcarazm/bootstrap5-toggle/tree/v4) | [](https://getbootstrap.com/docs/5.0) | [](https://github.com/palcarazm/bootstrap5-toggle/releases) |
|
|
24
|
+
| [bootstrap5-toggle v3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3) | [](https://getbootstrap.com/docs/4.0) | [](https://github.com/palcarazm/bootstrap5-toggle/releases) |
|
|
22
25
|
|
|
23
26
|
# Demos
|
|
24
|
-
|
|
27
|
+
|
|
28
|
+
**Demos and API Docs:** https://palcarazm.github.io/bootstrap5-toggle/
|
|
25
29
|
|
|
26
30
|
|
|
27
31
|
|
|
28
|
-
# Related Bootstrap
|
|
32
|
+
# Related Bootstrap Plugins
|
|
33
|
+
|
|
29
34
|
<div align="center">
|
|
30
35
|
<a href="https://github.com/palcarazm/bs-darkmode" title="Boostrap Darkmode"
|
|
31
36
|
><img
|
|
@@ -33,13 +38,17 @@ Branch | Bootstrap Support | Last Release
|
|
|
33
38
|
/></a>
|
|
34
39
|
</div>
|
|
35
40
|
|
|
36
|
-
|
|
41
|
+
---
|
|
37
42
|
|
|
38
43
|
<!-- To update TOC run .\node_modules\.bin\doctoc README.md --github -->
|
|
39
44
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
40
45
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
41
|
-
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
|
|
42
46
|
|
|
47
|
+
**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
|
|
48
|
+
|
|
49
|
+
- [Bootstrap 5 Toggle](#bootstrap-5-toggle) - [Library Distributions](#library-distributions)
|
|
50
|
+
- [Demos](#demos)
|
|
51
|
+
- [Related Bootstrap Plugins](#related-bootstrap-plugins)
|
|
43
52
|
- [Installation](#installation)
|
|
44
53
|
- [CDN](#cdn)
|
|
45
54
|
- [jQuery Interface](#jquery-interface)
|
|
@@ -61,56 +70,71 @@ Branch | Bootstrap Support | Last Release
|
|
|
61
70
|
|
|
62
71
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
63
72
|
|
|
64
|
-
|
|
73
|
+
---
|
|
65
74
|
|
|
66
75
|
# Installation
|
|
67
76
|
|
|
68
77
|
## CDN
|
|
69
|
-
|
|
78
|
+
|
|
79
|
+
[](https://www.jsdelivr.com/package/npm/bootstrap5-toggle)
|
|
80
|
+
|
|
70
81
|
### jQuery Interface
|
|
82
|
+
|
|
71
83
|
```html
|
|
72
|
-
<link
|
|
73
|
-
|
|
84
|
+
<link
|
|
85
|
+
href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.6/css/bootstrap5-toggle.min.css"
|
|
86
|
+
rel="stylesheet" />
|
|
87
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.6/js/bootstrap5-toggle.min.js"></script>
|
|
74
88
|
```
|
|
75
89
|
|
|
76
90
|
### ECMAS Interface
|
|
91
|
+
|
|
77
92
|
```html
|
|
78
|
-
<link
|
|
79
|
-
|
|
93
|
+
<link
|
|
94
|
+
href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.6/css/bootstrap5-toggle.min.css"
|
|
95
|
+
rel="stylesheet" />
|
|
96
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.6/js/bootstrap5-toggle.ecmas.min.js"></script>
|
|
80
97
|
```
|
|
81
98
|
|
|
82
99
|
## Download
|
|
83
|
-
|
|
100
|
+
|
|
101
|
+
[](https://github.com/palcarazm/bootstrap5-toggle/releases)
|
|
84
102
|
|
|
85
103
|
## NPM
|
|
86
|
-
|
|
104
|
+
|
|
105
|
+
[](https://www.npmjs.com/package/bootstrap5-toggle)
|
|
106
|
+
|
|
87
107
|
```ksh
|
|
88
|
-
npm install bootstrap5-toggle
|
|
108
|
+
npm install bootstrap5-toggle@4.3.6
|
|
89
109
|
```
|
|
90
110
|
|
|
91
111
|
## Yarn
|
|
112
|
+
|
|
92
113
|
```ksh
|
|
93
|
-
yarn add bootstrap5-toggle
|
|
114
|
+
yarn add bootstrap5-toggle@4.3.6
|
|
94
115
|
```
|
|
95
116
|
|
|
96
117
|
# Usage
|
|
97
118
|
|
|
98
119
|
## Initialize With HTML
|
|
120
|
+
|
|
99
121
|
Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 5 toggle.
|
|
100
122
|
|
|
101
123
|
```html
|
|
102
|
-
<input id="chkToggle" type="checkbox" data-toggle="toggle"
|
|
124
|
+
<input id="chkToggle" type="checkbox" data-toggle="toggle" />
|
|
103
125
|
```
|
|
104
126
|
|
|
105
127
|
## Initialize With Code
|
|
106
|
-
|
|
128
|
+
|
|
129
|
+
Toggles can also be initialized via JavaScript code.
|
|
107
130
|
|
|
108
131
|
EX: Initialize id `chkToggle` with a single line of JavaScript.
|
|
132
|
+
|
|
109
133
|
```html
|
|
110
|
-
<input id="chkToggle" type="checkbox" checked
|
|
134
|
+
<input id="chkToggle" type="checkbox" checked />
|
|
111
135
|
<script>
|
|
112
|
-
$(function(){
|
|
113
|
-
$(
|
|
136
|
+
$(function () {
|
|
137
|
+
$("#chkToggle").bootstrapToggle();
|
|
114
138
|
});
|
|
115
139
|
</script>
|
|
116
140
|
```
|
|
@@ -118,130 +142,149 @@ EX: Initialize id `chkToggle` with a single line of JavaScript.
|
|
|
118
142
|
# API
|
|
119
143
|
|
|
120
144
|
## Options
|
|
121
|
-
|
|
122
|
-
|
|
145
|
+
|
|
146
|
+
- Options can be passed via data attributes or JavaScript
|
|
147
|
+
- For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)
|
|
123
148
|
|
|
124
149
|
```html
|
|
125
|
-
<input
|
|
126
|
-
|
|
150
|
+
<input
|
|
151
|
+
type="checkbox"
|
|
152
|
+
data-toggle="toggle"
|
|
153
|
+
data-on="Enabled"
|
|
154
|
+
data-off="Disabled" />
|
|
155
|
+
<input type="checkbox" id="toggle-two" />
|
|
127
156
|
<script>
|
|
128
|
-
$(function() {
|
|
129
|
-
$(
|
|
130
|
-
on:
|
|
131
|
-
off:
|
|
157
|
+
$(function () {
|
|
158
|
+
$("#toggle-two").bootstrapToggle({
|
|
159
|
+
on: "Enabled",
|
|
160
|
+
off: "Disabled",
|
|
132
161
|
});
|
|
133
|
-
})
|
|
162
|
+
});
|
|
134
163
|
</script>
|
|
135
164
|
```
|
|
136
165
|
|
|
137
|
-
Name
|
|
138
|
-
|
|
139
|
-
`on`
|
|
140
|
-
`off`
|
|
141
|
-
`size`
|
|
142
|
-
`onstyle`
|
|
143
|
-
`offstyle
|
|
144
|
-
`onvalue`
|
|
145
|
-
`offvalue
|
|
146
|
-
`style`
|
|
147
|
-
`width`
|
|
148
|
-
`height`
|
|
149
|
-
`tabindex
|
|
150
|
-
`tristate
|
|
166
|
+
| Name | Type | Default | Description |
|
|
167
|
+
| ---------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
168
|
+
| `on` | string/html | "On" | Text of the on toggle |
|
|
169
|
+
| `off` | string/html | "Off" | Text of the off toggle |
|
|
170
|
+
| `size` | string | "normal" | Size of the toggle. Possible values are: `large`, `normal`, `small`, `mini`. |
|
|
171
|
+
| `onstyle` | string | "primary" | Style of the on toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |
|
|
172
|
+
| `offstyle` | string | "secondary" | Style of the off toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |
|
|
173
|
+
| `onvalue` | string | _null_ | Sets on state value |
|
|
174
|
+
| `offvalue` | string | _null_ | Sets off state value |
|
|
175
|
+
| `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. |
|
|
176
|
+
| `width` | integer | _null_ | Sets the width of the toggle. if set to _null_, width will be auto-calculated. |
|
|
177
|
+
| `height` | integer | _null_ | Sets the height of the toggle. if set to _null_, height will be auto-calculated. |
|
|
178
|
+
| `tabindex` | integer | 0 | Sets the tabindex of the toggle. |
|
|
179
|
+
| `tristate` | boolean | false | Sets tristate support |
|
|
151
180
|
|
|
152
181
|
## Methods
|
|
182
|
+
|
|
153
183
|
Methods can be used to control toggles directly.
|
|
154
184
|
|
|
155
185
|
```html
|
|
156
|
-
<input id="toggle-demo" type="checkbox" data-toggle="toggle"
|
|
186
|
+
<input id="toggle-demo" type="checkbox" data-toggle="toggle" />
|
|
157
187
|
```
|
|
158
188
|
|
|
159
|
-
Method
|
|
160
|
-
|
|
161
|
-
initialize
|
|
162
|
-
destroy
|
|
163
|
-
on
|
|
164
|
-
off
|
|
165
|
-
toggle
|
|
166
|
-
enable
|
|
167
|
-
disable
|
|
168
|
-
readonly
|
|
169
|
-
indeterminate| `$('#toggle-demo').bootstrapToggle('indeterminate')
|
|
170
|
-
determinate
|
|
189
|
+
| Method | Example | Description |
|
|
190
|
+
| ------------- | ---------------------------------------------------- | ------------------------------------------------- |
|
|
191
|
+
| initialize | `$('#toggle-demo').bootstrapToggle()` | Initializes the toggle plugin with options |
|
|
192
|
+
| destroy | `$('#toggle-demo').bootstrapToggle('destroy')` | Destroys the toggle |
|
|
193
|
+
| on | `$('#toggle-demo').bootstrapToggle('on')` | Sets the toggle to 'On' state |
|
|
194
|
+
| off | `$('#toggle-demo').bootstrapToggle('off')` | Sets the toggle to 'Off' state |
|
|
195
|
+
| toggle | `$('#toggle-demo').bootstrapToggle('toggle')` | Toggles the state of the toggle on/off |
|
|
196
|
+
| enable | `$('#toggle-demo').bootstrapToggle('enable')` | Enables the toggle |
|
|
197
|
+
| disable | `$('#toggle-demo').bootstrapToggle('disable')` | Disables the toggle |
|
|
198
|
+
| readonly | `$('#toggle-demo').bootstrapToggle('readonly')` | Disables the toggle but preserve checkbox enabled |
|
|
199
|
+
| indeterminate | `$('#toggle-demo').bootstrapToggle('indeterminate')` | Sets the toggle to 'indeterminate' state |
|
|
200
|
+
| determinate | `$('#toggle-demo').bootstrapToggle('determinate')` | Sets the toggle to 'determinate' state |
|
|
171
201
|
|
|
172
202
|
# Events
|
|
173
203
|
|
|
174
204
|
## Event Propagation
|
|
205
|
+
|
|
175
206
|
Note All events are propagated to and from input element to the toggle.
|
|
176
207
|
|
|
177
208
|
You should listen to events from the `<input type="checkbox">` directly rather than look for custom events.
|
|
178
209
|
|
|
179
210
|
```html
|
|
180
|
-
<input id="toggle-event" type="checkbox" data-toggle="toggle"
|
|
211
|
+
<input id="toggle-event" type="checkbox" data-toggle="toggle" />
|
|
181
212
|
<div id="console-event"></div>
|
|
182
213
|
<script>
|
|
183
|
-
$(function() {
|
|
184
|
-
$(
|
|
185
|
-
$(
|
|
186
|
-
})
|
|
187
|
-
})
|
|
214
|
+
$(function () {
|
|
215
|
+
$("#toggle-event").change(function () {
|
|
216
|
+
$("#console-event").html("Toggle: " + $(this).prop("checked"));
|
|
217
|
+
});
|
|
218
|
+
});
|
|
188
219
|
</script>
|
|
189
220
|
```
|
|
190
221
|
|
|
191
222
|
## Stopping Event Propagation
|
|
223
|
+
|
|
192
224
|
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.
|
|
193
225
|
|
|
194
226
|
```html
|
|
195
|
-
<input id="toggle-silent" type="checkbox" data-toggle="toggle"
|
|
196
|
-
<button class="btn btn-success" onclick="toggleApiOnSilent()"
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
<button class="btn btn-
|
|
227
|
+
<input id="toggle-silent" type="checkbox" data-toggle="toggle" />
|
|
228
|
+
<button class="btn btn-success" onclick="toggleApiOnSilent()">
|
|
229
|
+
On by API (silent)
|
|
230
|
+
</button>
|
|
231
|
+
<button class="btn btn-success" onclick="toggleApiOffSilent()">
|
|
232
|
+
Off by API (silent)
|
|
233
|
+
</button>
|
|
234
|
+
<button class="btn btn-warning" onclick="toggleApiOnNotSilent()">
|
|
235
|
+
On by API (not silent)
|
|
236
|
+
</button>
|
|
237
|
+
<button class="btn btn-warning" onclick="toggleApiOffNotSilent()">
|
|
238
|
+
On by API (not silent)
|
|
239
|
+
</button>
|
|
200
240
|
<script>
|
|
201
241
|
function toggleApiOnSilent() {
|
|
202
|
-
$(
|
|
242
|
+
$("#toggle-silent").bootstrapToggle("on", true);
|
|
203
243
|
}
|
|
204
244
|
function toggleApiOffSilent() {
|
|
205
|
-
$(
|
|
245
|
+
$("#toggle-silent").bootstrapToggle("off", true);
|
|
206
246
|
}
|
|
207
247
|
function toggleApiOnNotSilent() {
|
|
208
|
-
$(
|
|
248
|
+
$("#toggle-silent").bootstrapToggle("on");
|
|
209
249
|
}
|
|
210
250
|
function toggleApiOffNotSilent() {
|
|
211
|
-
$(
|
|
251
|
+
$("#toggle-silent").bootstrapToggle("off");
|
|
212
252
|
}
|
|
213
253
|
</script>
|
|
214
254
|
```
|
|
215
255
|
|
|
216
256
|
## API vs Input
|
|
257
|
+
|
|
217
258
|
This also means that using the API or Input to trigger events will work both ways.
|
|
218
259
|
|
|
219
260
|
```html
|
|
220
|
-
<input id="toggle-trigger" type="checkbox" data-toggle="toggle"
|
|
221
|
-
<button class="btn btn-success" onclick="toggleApiOn()"
|
|
222
|
-
<button class="btn btn-danger"
|
|
223
|
-
<button class="btn btn-success" onclick="toggleInpOn()"
|
|
224
|
-
<button class="btn btn-danger"
|
|
261
|
+
<input id="toggle-trigger" type="checkbox" data-toggle="toggle" />
|
|
262
|
+
<button class="btn btn-success" onclick="toggleApiOn()">On by API</button>
|
|
263
|
+
<button class="btn btn-danger" onclick="toggleApiOff()">Off by API</button>
|
|
264
|
+
<button class="btn btn-success" onclick="toggleInpOn()">On by Input</button>
|
|
265
|
+
<button class="btn btn-danger" onclick="toggleInpOff()">Off by Input</button>
|
|
225
266
|
<script>
|
|
226
267
|
function toggleApiOn() {
|
|
227
|
-
$(
|
|
268
|
+
$("#toggle-trigger").bootstrapToggle("on");
|
|
228
269
|
}
|
|
229
270
|
function toggleApiOff() {
|
|
230
|
-
$(
|
|
271
|
+
$("#toggle-trigger").bootstrapToggle("off");
|
|
231
272
|
}
|
|
232
273
|
function toggleInpOn() {
|
|
233
|
-
$(
|
|
274
|
+
$("#toggle-trigger").prop("checked", true).change();
|
|
234
275
|
}
|
|
235
276
|
function toggleInpOff() {
|
|
236
|
-
$(
|
|
277
|
+
$("#toggle-trigger").prop("checked", false).change();
|
|
237
278
|
}
|
|
238
279
|
</script>
|
|
239
280
|
```
|
|
281
|
+
|
|
240
282
|
# Collaborators welcom!
|
|
283
|
+
|
|
241
284
|
- :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)
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
285
|
+
- :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)
|
|
286
|
+
- :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)
|
|
287
|
+
- :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bootstrap5-toggle/compare).
|
|
245
288
|
|
|
246
289
|
[](https://github.com/palcarazm/bootstrap5-toggle/graphs/contributors)
|
|
247
290
|
|