update styles

Author: bradmartin

README.md

@@ -55,8 +55,33 @@ public getCheckProp() {
 
 ```
 
-### Angular Usage Help:
-[Here](https://github.com/bradmartin/nativescript-drawingpad#angular) is a sample on using UI components in Angular Native (NativeScript + Angular2)
+### Angular Usage Sample:
+
+```typescript
+import { CheckBox } from 'nativescript-checkbox';
+import { registerElement } from "nativescript-angular/element-registry";
+registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);
+
+export class SomeComponent  {
+    @ViewChild("CB1") FirstCheckBox: ElementRef;
+    constructor() {}
+    public toggleCheck() {
+        this.FirstCheckBox.nativeElement.toggle();
+    }
+
+    public getCheckProp() {
+        console.log('checked prop value = ' + this.FirstCheckBox.nativeElement.checked);
+    }
+}
+```
+
+```html
+<StackLayout>
+    <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
+    <Button (tap)="toggleCheck()" text="Toggle it!"></Button>
+    <Button (tap)="getCheckProp()" text="Check Property"></
+</StackLayout>
+```
 
 ## Properties
 

demo/app/app.css

@@ -10,6 +10,11 @@ ActionBar {
     color: #fff;
 }
 
+.tab-item {
+    color: #fff;
+    background-color: #fff000;
+}
+
 
 #wrapper{
     padding: 10;

demo/app/main-page.css

@@ -11,7 +11,6 @@ ListView{
 .list-check{
     font-weight: bold;
     font-size: 14;
-    color: black;
     margin: 2%, 0, 2%, 2%;
 }
 

demo/app/main-page.xml

@@ -3,7 +3,7 @@
   xmlns:CheckBox="nativescript-checkbox" loaded="pageLoaded">
   <ActionBar title="Native Checkbox" />
 
-<TabView id="tabViewContainer">
+<TabView id="tabViewContainer" selectedColor="#fff" tabsBackgroundColor="#336699">
     <TabView.items>
         <TabViewItem title="General" class="tab-item">
             <TabViewItem.view>
@@ -19,7 +19,7 @@
 
                     <Label text="Events" class="title" />
                     <StackLayout class="listitem">
-                        <CheckBox:CheckBox text="tap test" checked="false" tap="onTapTest" />
+                        <CheckBox:CheckBox text="tap test" tintColor="#fff000" checked="false" tap="onTapTest" />
                         <Label text="{{ eventLabel }}" textWrap="true" class="message" />
                     </StackLayout>
 
@@ -46,7 +46,7 @@
                 <ListView items="{{ uberData }}" separatorColor="#d0d0d0">
                     <ListView.itemTemplate>
                         <StackLayout class="list-item" >
-                              <CheckBox:CheckBox class="list-check" text="{{ text }}" checked="{{ checked }}" fillColor="{{ color }}" tintColor="{{ color }}" propertyChanged="onPropertyChanged" />
+                              <CheckBox:CheckBox class="list-check" ios:color="#555" text="{{ text }}" checked="{{ checked }}" fillColor="{{ color }}" tintColor="{{ color }}" propertyChanged="onPropertyChanged" />
                             </StackLayout>  
                     </ListView.itemTemplate>
                 </ListView>

demo/package.json

@@ -22,4 +22,4 @@
     "typescript": "^1.8.10",
     "tns-platform-declarations": "2.0.0"
   }
-}
+}