https://github.com/Sattvabit/angular-material-checkbox

Simple angular check-box directive using Google material design icons.
https://github.com/Sattvabit/angular-material-checkbox

Last synced: 3 months ago
JSON representation

Simple angular check-box directive using Google material design icons.

• Host: GitHub
• URL: https://github.com/Sattvabit/angular-material-checkbox
• Owner: Sattvabit
• License: mit
• Created: 2015-08-16T08:10:30.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-13T05:55:44.000Z (about 9 years ago)
• Last Synced: 2024-07-18T14:04:41.008Z (4 months ago)
• Language: HTML
• Size: 586 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# angular-material-checkbox

Simple angular check-box/toggle button directive using Google material design [icons](https://www.google.com/design/icons/).

[Click Here](http://www.sattvabit.com/angular-material-checkbox/) for demo.

###Key Features

* Uses Google material font icons to show checkbox in div

* Shows just a checkbox or checkbox with inline label

* Label is also clickable

* Older IE(tested in IE 7+) support if icons used in specific way

* Easy to use & fully customizable

### Getting Started

Download the package, and include the `/checkbox-directive.js` file in your page.

```bash

bower install angular-material-checkbox --save

```

Then add material icons with following line in your `index.html` head section:

```html

```

Also add the `sb.checkbox` as dependency to your Angular App main module, e.g.

```js

var app = angular.module('app', ['sb.checkbox']);

```

### Usage(With minimum options)

As an element(For newer HTML5 browsers):

```html

 model value: {{user.test1}} 

```

As an attribute(If you want to support older IE, also use angular 1.2.8):

```html





 model value: {{user.test1}} 

```

NOTE: `sb-checkbox` class is added in check-box container `div` you can override it to apply custom css.

### Description of attributes

| Attribute        | Description           | Required | Example  |

| :------------- |:-------------| :-----:| :-----|

| ng-model | model of checkbox | Yes | choices.checkbox1 |

| checked-icon-name | [Google material design icon](https://www.google.com/design/icons/) name for checked state | No | check_circle, check_box OR `` , `` (For IE 9 or below)|

| unchecked-icon-name | [Google material design icon](https://www.google.com/design/icons/) name for unchecked state | No | radio_button_unchecked, check_box_outline_blank OR `` , `` (For IE 9 or below)|

| checked-icon-color | Icon color in hex for checked state | No | '#009688' |

| unchecked-icon-color | Icon color in hex for unchecked state | No | '#B2DFDB' |

| size | size of checkbox | No | small, medium or large |

| pre-selected | if 'true' checkbox will be selected at start, defaults to false | No | true OR false

| show-label | Don't show label  if false, defaults to true | No | true OR false