mirror of
https://github.com/billz/raspap-webgui.git
synced 2023-10-10 13:37:24 +02:00
.. | ||
css | ||
js | ||
CHANGELOG.md | ||
LICENSE | ||
package.json | ||
README.md |
Bootstrap 4 Toggle
Bootstrap 4 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.
Library Distributions
Project | Description |
---|---|
bootstrap4-toggle | Supports bootstrap4 (requires jQuery) |
bootstrap-switch-button | Supports bootstrap4+ (ES6 class, no dependencies) |
bootstrap-switch-button-react | Supports bootstrap4+ (React component, no dependencies) |
Demos
Demos and API Docs: https://gitbrent.github.io/bootstrap4-toggle/
Table of Contents generated with DocToc
Installation
CDN
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
Download
NPM
npm install bootstrap4-toggle
Yarn
yarn add bootstrap4-toggle
Usage
Initialize With HTML
Simply add data-toggle="toggle"
to automatically convert a plain checkbox into a bootstrap 4 toggle.
<input id="chkToggle" type="checkbox" data-toggle="toggle">
Initialize With Code
Toggles can also be initialized via JavaScript code.
EX: Initialize id chkToggle
with a single line of JavaScript.
<input id="chkToggle" type="checkbox" checked>
<script>
$(function(){
$('#chkToggle').bootstrapToggle();
});
</script>
API
Options
- Options can be passed via data attributes or JavaScript
- For data attributes, append the option name to
data-
(ex:data-on="Enabled"
)
<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
<input type="checkbox" id="toggle-two">
<script>
$(function() {
$('#toggle-two').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
})
</script>
Name | Type | Default | Description |
---|---|---|---|
on |
string/html | "On" | Text of the on toggle |
off |
string/html | "Off" | Text of the off toggle |
size |
string | "normal" | Size of the toggle. Possible values are: large , normal , small , mini . |
onstyle |
string | "primary" | Style of the on toggle. Possible values are: primary ,secondary ,success ,danger ,warning ,info ,light ,dark |
offstyle |
string | "light" | Style of the off toggle. Possible values are: primary ,secondary ,success ,danger ,warning ,info ,light ,dark |
style |
string | Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. | |
width |
integer | null | Sets the width of the toggle. if set to null, width will be auto-calculated. |
height |
integer | null | Sets the height of the toggle. if set to null, height will be auto-calculated. |
Methods
Methods can be used to control toggles directly.
<input id="toggle-demo" type="checkbox" data-toggle="toggle">
Method | Example | Description |
---|---|---|
initialize | $('#toggle-demo').bootstrapToggle() |
Initializes the toggle plugin with options |
destroy | $('#toggle-demo').bootstrapToggle('destroy') |
Destroys the toggle |
on | $('#toggle-demo').bootstrapToggle('on') |
Sets the toggle to 'On' state |
off | $('#toggle-demo').bootstrapToggle('off') |
Sets the toggle to 'Off' state |
toggle | $('#toggle-demo').bootstrapToggle('toggle') |
Toggles the state of the toggle on/off |
enable | $('#toggle-demo').bootstrapToggle('enable') |
Enables the toggle |
disable | $('#toggle-demo').bootstrapToggle('disable') |
Disables the toggle |
Events
Event Propagation
Note All events are propagated to and from input element to the toggle.
You should listen to events from the <input type="checkbox">
directly rather than look for custom events.
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
API vs Input
This also means that using the API or Input to trigger events will work both ways.
<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleApiOn()" >On by API</button>
<button class="btn btn-danger" onclick="toggleApiOff()">Off by API</button>
<button class="btn btn-success" onclick="toggleInpOn()" >On by Input</button>
<button class="btn btn-danger" onclick="toggleInpOff()">Off by Input</button>
<script>
function toggleApiOn() {
$('#toggle-trigger').bootstrapToggle('on')
}
function toggleApiOff() {
$('#toggle-trigger').bootstrapToggle('off')
}
function toggleInpOn() {
$('#toggle-trigger').prop('checked', true).change()
}
function toggleInpOff() {
$('#toggle-trigger').prop('checked', false).change()
}
</script>