Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
bootstrap4-toggle
Advanced tools
Readme
Bootstrap 4 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.
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 and API Docs: https://gitbrent.github.io/bootstrap4-toggle/
Table of Contents generated with DocToc
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.0/js/bootstrap4-toggle.min.js"></script>
npm install bootstrap4-toggle
yarn add bootstrap4-toggle
Simply add data-toggle="toggle"
to automatically convert a plain checkbox into a bootstrap 4 toggle.
<input id="chkToggle" type="checkbox" data-toggle="toggle">
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>
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 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 |
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>
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>
FAQs
Bootstrap 4 Toggle is a bootstrap 4 plugin that converts checkboxes into toggles.
The npm package bootstrap4-toggle receives a total of 4,737 weekly downloads. As such, bootstrap4-toggle popularity was classified as popular.
We found that bootstrap4-toggle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.