Added information and tests for bootstrap-like styles

Author: Sebastian Hammerl

README.md

@@ -38,14 +38,26 @@ Add "ui.checkbox" to your modules list. Then you can use it like AngularJS input
 Additionally you can set the size:
 
 ```
-<checkbox ...></checkbox>               (Normal size, corresponds to 'btn-xs')
-<checkbox large ...></checkbox>         (Large, corresponds to 'btn-sm')
-<checkbox larger ...></checkbox>        (Larger, corresponds to Button default size)
-<checkbox largest ...></checkbox>       (Largest, corresponds to 'btn-lg')
+<checkbox ...></checkbox>            (Normal size, corresponds to 'btn-xs')
+<checkbox large ...></checkbox>      (Large, corresponds to 'btn-sm')
+<checkbox larger ...></checkbox>     (Larger, corresponds to Button default size)
+<checkbox largest ...></checkbox>    (Largest, corresponds to 'btn-lg')
 ```
 
 ![Screenshot](/sizes.png?raw=true "Screenshot Sizes")
 
+And also style the checkboxes Bootstrap like:
+
+```
+<checkbox class="btn-primary"></checkbox>    (Looks like primary button)
+<checkbox class="btn-success"></checkbox>    (Looks like success button)
+<checkbox class="btn-info"></checkbox>       (Looks like info button)
+<checkbox class="btn-warning"></checkbox>    (Looks like warning button)
+<checkbox class="btn-danger"></checkbox>     (Looks like danger button)
+```
+
+![Screenshot](/styles.png?raw=true "Screenshot Styles")
+
 See index.html for examples and how it works.
 
 ### Testing:

app.js

@@ -2,7 +2,7 @@
 
 angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"]).controller("index", function($scope) {
 	$scope.checkboxModel = [
-		false, false, false,false, false, false, false, false, true
+		false, false, false,false, false, false, false, false, true, false, true
 	];
 
 	$scope.changes = 0;

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-checkbox",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "authors": [
     "Sebastian Hammerl, Getslash GmbH"
   ],

index.html

@@ -276,14 +276,81 @@
 		</td>
 	</tr>
 
+	<tr>
+		<td>
+			Different Styles (normal, primary, success, info, warning, danger)
+		</td>
+		<td></td>
+		<td>
+			default:<br><br><br>
+
+			primary:<br><br><br>
+
+			success:<br><br><br>
+
+			info:<br><br><br>
+
+			warning:<br><br><br>
+
+			danger:
+		</td>
+		<td>
+			<checkbox id="checkbox9a" ng-model="checkboxModel[9]"></checkbox>
+			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+			<checkbox id="checkbox10a" ng-model="checkboxModel[10]"></checkbox><br><br><br>
+
+			<checkbox id="checkbox9b" class="btn-primary" ng-model="checkboxModel[9]"></checkbox>
+			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+			<checkbox id="checkbox10b" class="btn-primary" ng-model="checkboxModel[10]"></checkbox><br><br><br>
+
+			<checkbox id="checkbox9c" class="btn-success" ng-model="checkboxModel[9]"></checkbox>
+			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+			<checkbox id="checkbox10c" class="btn-success" ng-model="checkboxModel[10]"></checkbox><br><br><br>
+
+			<checkbox id="checkbox9d" class="btn-info" ng-model="checkboxModel[9]"></checkbox>
+			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+			<checkbox id="checkbox10d" class="btn-info" ng-model="checkboxModel[10]"></checkbox><br><br><br>
+
+			<checkbox id="checkbox9e" class="btn-warning" ng-model="checkboxModel[9]"></checkbox>
+			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+			<checkbox id="checkbox10e" class="btn-warning" ng-model="checkboxModel[10]"></checkbox><br><br><br>
+
+			<checkbox id="checkbox9f" class="btn-danger" ng-model="checkboxModel[9]"></checkbox>
+			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+			<checkbox id="checkbox10f" class="btn-danger" ng-model="checkboxModel[10]"></checkbox>
+		</td>
+
+		<td style="width:300px;">
+
+<pre>&lt;checkbox
+    ng-model="checkboxModel[9]"
+&gt;&lt;/checkbox&gt
+&lt;checkbox class="btn-primary"
+    ng-model="checkboxModel[9]"
+&gt;&lt;/checkbox&gt
+&lt;checkbox class="btn-success"
+    ng-model="checkboxModel[9]"
+&gt;&lt;/checkbox&gt
+&lt;checkbox class="btn-info"
+    ng-model="checkboxModel[9]"
+&gt;&lt;/checkbox&gt
+&lt;checkbox class="btn-warning"
+    ng-model="checkboxModel[9]"
+&gt;&lt;/checkbox&gt
+&lt;checkbox class="btn-danger"
+    ng-model="checkboxModel[9]"
+&gt;&lt;/checkbox&gt</pre>
+		</td>
+	</tr>
+
 	<tr>
 		<td colspan="5">
 			<b>app.js:</b>
 			<pre>
 angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"])
 .controller("index", function($scope) {
     $scope.checkboxModel = [
-        false, false, false,false, false, false, false, false, true
+        false, false, false,false, false, false, false, false, true, false, true
     ];
 
     $scope.changes = 0;

styles.png

@@ -331,4 +331,23 @@ describe("Checkbutton Tests", function() {
 		expect(element("#checkbox8c").css("height")).toBe("34px");
 		expect(element("#checkbox8d").css("height")).toBe("45px");
 	});
+
+	it("Example Different Styles", function() {
+		browser().navigateTo("index.html");
+
+		// Check if the checkbox has been replaced with template
+		expect(element("#checkbox9a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
+		expect(element("#checkbox9b").attr("class")).toBe("btn-primary btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
+		expect(element("#checkbox9c").attr("class")).toBe("btn-success btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
+		expect(element("#checkbox9d").attr("class")).toBe("btn-info btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
+		expect(element("#checkbox9e").attr("class")).toBe("btn-warning btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
+		expect(element("#checkbox9f").attr("class")).toBe("btn-danger btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty");
+
+		expect(element("#checkbox9a").css("background-color")).toBe("rgb(255, 255, 255)");
+		expect(element("#checkbox9b").css("background-color")).toBe("rgb(66, 139, 202)");
+		expect(element("#checkbox9c").css("background-color")).toBe("rgb(92, 184, 92)");
+		expect(element("#checkbox9d").css("background-color")).toBe("rgb(91, 192, 222)");
+		expect(element("#checkbox9e").css("background-color")).toBe("rgb(240, 173, 78)");
+		expect(element("#checkbox9f").css("background-color")).toBe("rgb(217, 83, 79)");
+	});
 });