Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gitbrent/bootstrap4-toggle

Bootstrap 4 Switch Button / Toggle
https://github.com/gitbrent/bootstrap4-toggle

bootstrap bootstrap-4 bootstrap-widget bootstrap4 bootstrap4-checkbox bootstrap4-switch bootstrap4-switch-button

Last synced: 1 day ago
JSON representation

Bootstrap 4 Switch Button / Toggle

Host: GitHub
URL: https://github.com/gitbrent/bootstrap4-toggle
Owner: gitbrent
License: mit
Fork: true (minhur/bootstrap-toggle)
Created: 2018-10-18T02:08:40.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-03-14T10:09:21.000Z (almost 2 years ago)
Last Synced: 2025-01-15T22:29:31.452Z (6 days ago)
Topics: bootstrap, bootstrap-4, bootstrap-widget, bootstrap4, bootstrap4-checkbox, bootstrap4-switch, bootstrap4-switch-button
Language: HTML
Homepage: https://gitbrent.github.io/bootstrap4-toggle/
Size: 1.63 MB
Stars: 212
Watchers: 9
Forks: 67
Open Issues: 40
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        [![MIT Licence](https://img.shields.io/github/license/gitbrent/bootstrap4-toggle.svg)](https://opensource.org/licenses/mit-license.php)   [![Bootstrap 4.2.1](https://img.shields.io/badge/bootstrap-4.3.1-green.svg?style=flat-square)](https://getbootstrap.com/docs/4.1)  [![Known Vulnerabilities](https://snyk.io/test/npm/bootstrap4-toggle/badge.svg)](https://snyk.io/test/npm/bootstrap4-toggle)  [![npm downloads](https://img.shields.io/npm/dm/bootstrap4-toggle.svg)](https://www.npmjs.com/package/bootstrap4-toggle)  [![JSDelivr Badge](https://data.jsdelivr.com/v1/package/gh/gitbrent/bootstrap4-toggle/badge)](https://www.jsdelivr.com/package/gh/gitbrent/bootstrap4-toggle)

# Bootstrap 4 Toggle

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

**************************************************************************************************

#### Library Distributions

Project                                                                                    |Description

-------------------------------------------------------------------------------------------|-------------------------------------------------------

[bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle)                         | Supports bootstrap4 (requires jQuery)

[bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button)             | Supports bootstrap4+ (ES6 class, no dependencies)

[bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies)

# Demos

**Demos and API Docs:** https://gitbrent.github.io/bootstrap4-toggle/  

![Demo GIF](https://github.com/gitbrent/bootstrap4-toggle/blob/master/doc/bootstrap4-toggle-demo.gif?raw=true)

**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*

- [Installation](#installation)

  - [CDN](#cdn)

  - [Download](#download)

  - [NPM](#npm)

  - [Yarn](#yarn)

- [Usage](#usage)

  - [Initialize With HTML](#initialize-with-html)

  - [Initialize With Code](#initialize-with-code)

- [API](#api)

  - [Options](#options)

  - [Methods](#methods)

- [Events](#events)

  - [Event Propagation](#event-propagation)

  - [Stopping Event Propagation](#stopping-event-propagation)

  - [API vs Input](#api-vs-input)

**************************************************************************************************

# Installation

## CDN

```html

  

```

## Download

[Latest GitHub Release](https://github.com/gitbrent/bootstrap4-toggle/releases/latest)

## NPM

```ksh

npm install bootstrap4-toggle

```

## Yarn

```ksh

yarn add bootstrap4-toggle

```

# Usage

## Initialize With HTML

Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 4 toggle.

```html

```

## Initialize With Code

Toggles can also be initialized via JavaScript code.  

EX: Initialize id `chkToggle` with a single line of JavaScript.

```html

  $(function(){

    $('#chkToggle').bootstrapToggle();

  });

```

# API

## Options

* Options can be passed via data attributes or JavaScript

* For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)

```html

  $(function() {

    $('#toggle-two').bootstrapToggle({

      on: 'Enabled',

      off: 'Disabled'

    });

  })

```

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.

```html

```

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 `` directly rather than look for custom events.

```html



  $(function() {

    $('#toggle-event').change(function() {

      $('#console-event').html('Toggle: ' + $(this).prop('checked'))

    })

  })

```

## Stopping Event Propagation

Passing `true` to the on/off 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.

```html

On by API (silent)

Off by API (silent)

On by API (not silent)

On by API (not silent)

  function toggleApiOnSilent() {

    $('#toggle-silent').bootstrapToggle('on', true);

  }

  function toggleApiOffSilent() {

    $('#toggle-silent').bootstrapToggle('off', true);

  }

  function toggleApiOnNotSilent() {

    $('#toggle-silent').bootstrapToggle('on');

  }

  function toggleApiOffNotSilent() {

    $('#toggle-silent').bootstrapToggle('off');

  }

```

## API vs Input

This also means that using the API or Input to trigger events will work both ways.

```html

On by API

Off by API

On by Input

Off by Input

  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()

  }

```