Angular Bootstrap Toggle

Getting Started

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

AngularJS (requires AngularJS 1.3.x, tested with 1.7.4).
Bootstrap CSS (tested with version 3.3.7).

Installation

You can download the latest version of Angular Bootstrap Toggle or use CDN to load the library.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angular-bootstrap-toggle@0.4.0/dist/angular-bootstrap-toggle.min.css">
<script src="https://cdn.jsdelivr.net/npm/angular-bootstrap-toggle@0.4.0/dist/angular-bootstrap-toggle.min.js"></script>

Bower Installation

$ bower install angular-bootstrap-toggle --save

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.toggle module:

angular.module('myModule', ['ui.toggle']);

Usage

Basic example

value: {{toggleValue}}

change event triggered times: {{clickTimes}}

Options

Options can be passed via attributes

Name	Type	Default	Description
on	string \| html	`"On"`	Text of the on toggle
off	string \| html	`"Off"`	Text of the off toggle
size	string	`"btn"`	Size class of the toggle. Possible values are:`btn-lg`,`btn`,`btn-sm`,`btn-xs` Refer to Bootstrap Button Sizes documentation for more information.
on-class	string	`"btn-primary"`	Class of the on toggle. Possible values are:`btn-default`,`btn-primary`,`btn-success`,`btn-info`,`btn-warning`,`btn-danger` Refer to Bootstrap Button Options documentation for more information.
off-class	string	`"btn-default"`	Class of the off toggle. Possible values are:`btn-default`,`btn-primary`,`btn-success`,`btn-info`,`btn-warning`,`btn-danger` Refer to Bootstrap Button Options documentation for more information.
toggle-class	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.

Demos

Sizes

Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.

Colors

Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.

Colors Mix

You can style on state as well as the off state.

Custom Style

Customized styles can be applied as easily.

Custom Text

The text can be changed easily with attributes or options.

Icons/Html Text

You can easily add icons or images since html is supported for on/off text.

Multiple Lines of Text

Toggles with multiple lines will adjust its heights.

Animation Speed

Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.

Properly Sized (even in hidden elements)

Here's a toggle inside a modal, to prove that we've really fixed the auto-sizing issue!