Showing posts with label angular material. Show all posts
Showing posts with label angular material. Show all posts


May 17, 2017

Simple angular check-box/toggle button directive using Google material design icons.
Click Here 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.
 bower install angular-material-checkbox --save  
Then add material icons with following line in your index.html head section:
 <link href="" rel="stylesheet">  
Also add the sb.checkbox as dependency to your Angular App main module, e.g.
 var app = angular.module('app', ['sb.checkbox']);  

Usage(With minimum options)

As an element(For newer HTML5 browsers):
      label="test label"  
 <span> model value: {{user.test1}} </span>  
As an attribute(If you want to support older IE, also use angular 1.2.8):
 <!-- Used as attribute to support <=IE9 versions -->  
 <div sb-checkbox label="test labrl"  
 <span> model value: {{user.test1}} </span>  
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 name for checked state No check_circle, check_box OR  ,  (For IE 9 or below)
unchecked-icon-name Google material design icon 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

Note: Special thanks to Sattvabit

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.