Angular Bootstrap Toggle

AngularJS version of 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:

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.2/dist/angular-bootstrap-toggle.min.css"> <script src="https://cdn.jsdelivr.net/npm/angular-bootstrap-toggle@0.4.2/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!