npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bootstrap4-toggle

v3.6.1

Published

Bootstrap 4 Toggle is a bootstrap 4 plugin that converts checkboxes into toggles.

Downloads

24,078

Readme

MIT Licence Bootstrap 4.2.1 Known Vulnerabilities npm downloads JSDelivr Badge

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/

Demo GIF

Table of Contents generated with DocToc


Installation

CDN

<link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">  
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>

Download

Latest GitHub Release

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>