├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── css
├── bootstrap-toggle.css
├── bootstrap-toggle.min.css
├── bootstrap2-toggle.css
└── bootstrap2-toggle.min.css
├── doc
├── header.png
├── nyt.png
├── nytdev.svg
├── script.js
└── stylesheet.css
├── index.html
├── js
├── bootstrap-toggle.js
├── bootstrap-toggle.min.js
├── bootstrap-toggle.min.js.map
├── bootstrap2-toggle.js
├── bootstrap2-toggle.min.js
└── bootstrap2-toggle.min.js.map
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
--------------------------------------------------------------------------------
/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 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bootstrap Toggle
2 | Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
3 |
4 | Visit http://www.bootstraptoggle.com for demos.
5 |
6 | ## Getting Started
7 |
8 | ### Installation
9 | You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library.
10 |
11 | `Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead.
12 |
13 | ```html
14 |
15 |
16 | ```
17 |
18 | ### Bower Install
19 | ```bash
20 | bower install bootstrap-toggle
21 | ```
22 |
23 | ## Usage
24 |
25 | ### Basic example
26 | Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
27 |
28 | ```html
29 |
30 | ```
31 |
32 | ### Stacked checkboxes
33 | Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
34 |
35 | ```html
36 |
37 |
41 |
42 |
43 |
47 |
48 | ```
49 |
50 | ### Inline Checkboxes
51 | Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles.
52 |
53 | ```html
54 |
57 |
60 |
63 | ```
64 |
65 | ## API
66 |
67 | ### Initialize by JavaScript
68 | Initialize toggles with id `toggle-one` with a single line of JavaScript.
69 |
70 | ```html
71 |
72 |
77 | ```
78 |
79 | ### Options
80 | Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`.
81 |
82 | ```html
83 |
84 |
85 |
93 | ```
94 |
95 | Name|Type|Default|Description|
96 | ---|---|---|---
97 | on|string/html|"On"|Text of the on toggle
98 | off|string/html|"Off"|Text of the off toggle
99 | size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`.
100 | onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
101 | offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
102 | 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.
103 | width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated.
104 | height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated.
105 |
106 | ### Methods
107 | Methods can be used to control toggles directly.
108 |
109 | ```html
110 |
111 | ```
112 |
113 | Method|Example|Description
114 | ---|---|---
115 | initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options
116 | destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle
117 | on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state
118 | off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state
119 | toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle
120 | enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle
121 | disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle
122 |
123 | ## Events
124 |
125 | ### Event Propagation
126 | Note All events are propagated to and from input element to the toggle.
127 |
128 | You should listen to events from the `` directly rather than look for custom events.
129 |
130 | ```html
131 |
132 |
133 |
140 | ```
141 |
142 | ### API vs Input
143 | This also means that using the API or Input to trigger events will work both ways.
144 |
145 | ```html
146 |
147 |
148 |
149 |
150 |
151 |
165 | ```
166 |
167 | ### Integration
168 |
169 | #### [KnockoutJS](http://knockoutjs.com)
170 |
171 | A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle)
172 |
173 | ## Demos
174 |
175 | Visit http://www.bootstraptoggle.com for demos.
176 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bootstrap-toggle",
3 | "description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles",
4 | "version": "2.2.1",
5 | "keywords": [
6 | "bootstrap",
7 | "toggle",
8 | "bootstrap-toggle",
9 | "switch",
10 | "bootstrap-switch"
11 | ],
12 | "homepage": "http://www.bootstraptoggle.com",
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/minhur/bootstrap-toggle.git"
16 | },
17 | "license": "MIT",
18 | "authors": [
19 | "Min Hur "
20 | ],
21 | "main": [
22 | "./js/bootstrap-toggle.min.js",
23 | "./css/bootstrap-toggle.min.css"
24 | ],
25 | "ignore": [
26 | "**/.*",
27 | "node_modules",
28 | "bower_components",
29 | "test",
30 | "tests"
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/css/bootstrap-toggle.css:
--------------------------------------------------------------------------------
1 | /*! ========================================================================
2 | * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
3 | * http://www.bootstraptoggle.com
4 | * ========================================================================
5 | * Copyright 2014 Min Hur, The New York Times Company
6 | * Licensed under MIT
7 | * ======================================================================== */
8 |
9 |
10 | .checkbox label .toggle,
11 | .checkbox-inline .toggle {
12 | margin-left: -20px;
13 | margin-right: 5px;
14 | }
15 |
16 | .toggle {
17 | position: relative;
18 | overflow: hidden;
19 | }
20 | .toggle input[type="checkbox"] {
21 | display: none;
22 | }
23 | .toggle-group {
24 | position: absolute;
25 | width: 200%;
26 | top: 0;
27 | bottom: 0;
28 | left: 0;
29 | transition: left 0.35s;
30 | -webkit-transition: left 0.35s;
31 | -moz-user-select: none;
32 | -webkit-user-select: none;
33 | }
34 | .toggle.off .toggle-group {
35 | left: -100%;
36 | }
37 | .toggle-on {
38 | position: absolute;
39 | top: 0;
40 | bottom: 0;
41 | left: 0;
42 | right: 50%;
43 | margin: 0;
44 | border: 0;
45 | border-radius: 0;
46 | }
47 | .toggle-off {
48 | position: absolute;
49 | top: 0;
50 | bottom: 0;
51 | left: 50%;
52 | right: 0;
53 | margin: 0;
54 | border: 0;
55 | border-radius: 0;
56 | }
57 | .toggle-handle {
58 | position: relative;
59 | margin: 0 auto;
60 | padding-top: 0px;
61 | padding-bottom: 0px;
62 | height: 100%;
63 | width: 0px;
64 | border-width: 0 1px;
65 | }
66 |
67 | .toggle.btn { min-width: 59px; min-height: 34px; }
68 | .toggle-on.btn { padding-right: 24px; }
69 | .toggle-off.btn { padding-left: 24px; }
70 |
71 | .toggle.btn-lg { min-width: 79px; min-height: 45px; }
72 | .toggle-on.btn-lg { padding-right: 31px; }
73 | .toggle-off.btn-lg { padding-left: 31px; }
74 | .toggle-handle.btn-lg { width: 40px; }
75 |
76 | .toggle.btn-sm { min-width: 50px; min-height: 30px;}
77 | .toggle-on.btn-sm { padding-right: 20px; }
78 | .toggle-off.btn-sm { padding-left: 20px; }
79 |
80 | .toggle.btn-xs { min-width: 35px; min-height: 22px;}
81 | .toggle-on.btn-xs { padding-right: 12px; }
82 | .toggle-off.btn-xs { padding-left: 12px; }
83 |
84 |
--------------------------------------------------------------------------------
/css/bootstrap-toggle.min.css:
--------------------------------------------------------------------------------
1 | /*! ========================================================================
2 | * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
3 | * http://www.bootstraptoggle.com
4 | * ========================================================================
5 | * Copyright 2014 Min Hur, The New York Times Company
6 | * Licensed under MIT
7 | * ======================================================================== */
8 | .checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
9 | .toggle{position:relative;overflow:hidden}
10 | .toggle input[type=checkbox]{display:none}
11 | .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}
12 | .toggle.off .toggle-group{left:-100%}
13 | .toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
14 | .toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
15 | .toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
16 | .toggle.btn{min-width:59px;min-height:34px}
17 | .toggle-on.btn{padding-right:24px}
18 | .toggle-off.btn{padding-left:24px}
19 | .toggle.btn-lg{min-width:79px;min-height:45px}
20 | .toggle-on.btn-lg{padding-right:31px}
21 | .toggle-off.btn-lg{padding-left:31px}
22 | .toggle-handle.btn-lg{width:40px}
23 | .toggle.btn-sm{min-width:50px;min-height:30px}
24 | .toggle-on.btn-sm{padding-right:20px}
25 | .toggle-off.btn-sm{padding-left:20px}
26 | .toggle.btn-xs{min-width:35px;min-height:22px}
27 | .toggle-on.btn-xs{padding-right:12px}
28 | .toggle-off.btn-xs{padding-left:12px}
--------------------------------------------------------------------------------
/css/bootstrap2-toggle.css:
--------------------------------------------------------------------------------
1 | /*! ========================================================================
2 | * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0
3 | * http://www.bootstraptoggle.com
4 | * ========================================================================
5 | * Copyright 2014 Min Hur, The New York Times Company
6 | * Licensed under MIT
7 | * ======================================================================== */
8 |
9 |
10 | label.checkbox .toggle,
11 | label.checkbox.inline .toggle {
12 | margin-left: -20px;
13 | margin-right: 5px;
14 | }
15 | .toggle {
16 | min-width: 40px;
17 | height: 20px;
18 | position: relative;
19 | overflow: hidden;
20 | }
21 | .toggle input[type="checkbox"] {
22 | display: none;
23 | }
24 | .toggle-group {
25 | position: absolute;
26 | width: 200%;
27 | top: 0;
28 | bottom: 0;
29 | left: 0;
30 | transition: left 0.35s;
31 | -webkit-transition: left 0.35s;
32 | -moz-user-select: none;
33 | -webkit-user-select: none;
34 | }
35 | .toggle.off .toggle-group {
36 | left: -100%;
37 | }
38 | .toggle-on {
39 | position: absolute;
40 | top: 0;
41 | bottom: 0;
42 | left: 0;
43 | right: 50%;
44 | margin: 0;
45 | border: 0;
46 | border-radius: 0;
47 | }
48 | .toggle-off {
49 | position: absolute;
50 | top: 0;
51 | bottom: 0;
52 | left: 50%;
53 | right: 0;
54 | margin: 0;
55 | border: 0;
56 | border-radius: 0;
57 | }
58 | .toggle-handle {
59 | position: relative;
60 | margin: 0 auto;
61 | padding-top: 0px;
62 | padding-bottom: 0px;
63 | height: 100%;
64 | width: 0px;
65 | border-width: 0 1px;
66 | }
67 | .toggle-handle.btn-mini {
68 | top: -1px;
69 | }
70 | .toggle.btn { min-width: 30px; }
71 | .toggle-on.btn { padding-right: 24px; }
72 | .toggle-off.btn { padding-left: 24px; }
73 |
74 | .toggle.btn-large { min-width: 40px; }
75 | .toggle-on.btn-large { padding-right: 35px; }
76 | .toggle-off.btn-large { padding-left: 35px; }
77 |
78 | .toggle.btn-small { min-width: 25px; }
79 | .toggle-on.btn-small { padding-right: 20px; }
80 | .toggle-off.btn-small { padding-left: 20px; }
81 |
82 | .toggle.btn-mini { min-width: 20px; }
83 | .toggle-on.btn-mini { padding-right: 12px; }
84 | .toggle-off.btn-mini { padding-left: 12px; }
85 |
86 |
--------------------------------------------------------------------------------
/css/bootstrap2-toggle.min.css:
--------------------------------------------------------------------------------
1 | /*! ========================================================================
2 | * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0
3 | * http://www.bootstraptoggle.com
4 | * ========================================================================
5 | * Copyright 2014 Min Hur, The New York Times Company
6 | * Licensed under MIT
7 | * ======================================================================== */
8 | label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px}
9 | .toggle{min-width:40px;height:20px;position:relative;overflow:hidden}
10 | .toggle input[type=checkbox]{display:none}
11 | .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}
12 | .toggle.off .toggle-group{left:-100%}
13 | .toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
14 | .toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
15 | .toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
16 | .toggle-handle.btn-mini{top:-1px}
17 | .toggle.btn{min-width:30px}
18 | .toggle-on.btn{padding-right:24px}
19 | .toggle-off.btn{padding-left:24px}
20 | .toggle.btn-large{min-width:40px}
21 | .toggle-on.btn-large{padding-right:35px}
22 | .toggle-off.btn-large{padding-left:35px}
23 | .toggle.btn-small{min-width:25px}
24 | .toggle-on.btn-small{padding-right:20px}
25 | .toggle-off.btn-small{padding-left:20px}
26 | .toggle.btn-mini{min-width:20px}
27 | .toggle-on.btn-mini{padding-right:12px}
28 | .toggle-off.btn-mini{padding-left:12px}
--------------------------------------------------------------------------------
/doc/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minhur/bootstrap-toggle/b76c094aca46c7d959aae991033fa578bdb0ca5d/doc/header.png
--------------------------------------------------------------------------------
/doc/nyt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minhur/bootstrap-toggle/b76c094aca46c7d959aae991033fa578bdb0ca5d/doc/nyt.png
--------------------------------------------------------------------------------
/doc/nytdev.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
240 |
--------------------------------------------------------------------------------
/doc/script.js:
--------------------------------------------------------------------------------
1 | +function ($) {
2 | 'use strict';
3 |
4 | $('.example:not(.skip)').each(function() {
5 | // fetch & encode html
6 | var html = $('
Simply add data-toggle="toggle" to convert checkboxes into toggles.
85 |
86 |
87 |
88 |
89 |
Stacked checkboxes
90 |
Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle" to convert checkboxes into toggles.
91 |
92 |
93 |
97 |
98 |
99 |
103 |
104 |
105 |
106 |
Inline Checkboxes
107 |
Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle" to a convert checkboxes into toggles.
108 |
109 |
112 |
115 |
118 |
119 |
120 |
121 |
122 |
API
123 |
124 |
125 |
Initialize by JavaScript
126 |
Initialize toggles with id toggle-one with a single line of JavaScript.
127 |
128 |
129 |
134 |
135 |
136 |
Options
137 |
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".
138 |
139 |
140 |
141 |
149 |
150 |
151 |
152 |
153 |
154 |
Name
155 |
Type
156 |
Default
157 |
Description
158 |
159 |
160 |
161 |
162 |
on
163 |
string | html
164 |
"On"
165 |
Text of the on toggle
166 |
167 |
168 |
off
169 |
string | html
170 |
"Off"
171 |
Text of the off toggle
172 |
173 |
174 |
size
175 |
string
176 |
"normal"
177 |
178 | Size of the toggle. Possible values are:large,normal,small,mini
179 | Refer to Bootstrap Button Sizes documentation for more information.
180 |
181 |
182 |
183 |
onstyle
184 |
string
185 |
"primary"
186 |
187 | Style of the on toggle. Possible values are:default,primary,success,info,warning,danger
188 | Refer to Bootstrap Button Options documentation for more information.
189 |
190 |
191 |
192 |
offstyle
193 |
string
194 |
"default"
195 |
196 | Style of the off toggle. Possible values are:default,primary,success,info,warning,danger
197 | Refer to Bootstrap Button Options documentation for more information.
198 |
199 |
200 |
201 |
style
202 |
string
203 |
204 |
205 | Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
206 |
207 |
208 |
209 |
width
210 |
integer
211 |
null
212 |
213 | Sets the width of the toggle. if set to null, width will be calculated.
214 |
215 |
216 |
217 |
height
218 |
integer
219 |
null
220 |
221 | Sets the height of the toggle. if set to null, height will be calculated.
222 |
223 |
224 |
225 |
226 |
227 |
228 |
Methods
229 |
Methods can be used to control toggles directly.
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
Method
238 |
Example
239 |
Description
240 |
Demo
241 |
242 |
243 |
244 |
245 |
initialize
246 |
$('#toggle-demo').bootstrapToggle()
247 |
Initializes the toggle plugin with options
248 |
249 |
250 |
251 |
destroy
252 |
$('#toggle-demo').bootstrapToggle('destroy')
253 |
Destroys the toggle
254 |
255 |
256 |
257 |
on
258 |
$('#toggle-demo').bootstrapToggle('on')
259 |
Sets the toggle to 'On' state
260 |
261 |
262 |
263 |
off
264 |
$('#toggle-demo').bootstrapToggle('off')
265 |
Sets the toggle to 'Off' state
266 |
267 |
268 |
269 |
toggle
270 |
$('#toggle-demo').bootstrapToggle('toggle')
271 |
Toggles the state of the toggle
272 |
273 |
274 |
275 |
enable
276 |
$('#toggle-demo').bootstrapToggle('enable')
277 |
Enables the toggle
278 |
279 |
280 |
281 |
disable
282 |
$('#toggle-demo').bootstrapToggle('disable')
283 |
Disables the toggle
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
Events
294 |
295 |
296 |
Event Propagation
297 |
Note All events are propagated to and from input element to the toggle.
298 |
You should listen to events from the <input type="checkbox"> directly rather than look for custom events.
299 |
300 |
301 |
302 |
309 |
310 |
311 |
API vs Input
312 |
This also means that using the API or Input to trigger events will work both ways.
313 |
314 |
315 |
316 |
317 |
318 |
319 |
333 |
334 |
335 |
336 |
337 |
Demos
338 |
339 |
340 |
Sizes
341 |
Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
Custom Sizes
350 |
Bootstrap toggle can handle custom sizes by data-width and data-height options.
351 |
352 |
353 |
354 |
355 |
356 |
357 |
Colors
358 |
Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
Colors Mix
369 |
You can style on state as well as the off state.
370 |
371 |
372 |
373 |
374 |
375 |
Custom Style
376 |
Customized styles can be applied as easily.
377 |
378 |
382 |
383 |
387 |
388 |
389 |
390 |
Custom Text
391 |
The text can be changed easily with attributes or options.
392 |
393 |
394 |
395 |
396 |
Icons/Html Text
397 |
You can easily add icons or images since html is supported for on/off text.
398 |
399 |
400 |
401 |
402 |
Multiple Lines of Text
403 |
Toggles with multiple lines will adjust its heights.
404 |
405 |
406 |
407 |
408 |
Animation Speed
409 |
Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.