## 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!