NativeScript-CheckBox

NativeScript CheckBox ✅

A NativeScript plugin for the native checkbox widget.

Platform controls used:

Android	iOS
Android CheckBox	BEMCheckBox

Sample Usage

Android Sample	iOS Sample

Installation

From your command prompt/terminal go to your app's root folder and execute:

tns plugin add nativescript-checkbox

Usage

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:CheckBox="nativescript-checkbox" loaded="pageLoaded">
  <ActionBar title="Native Checkbox" />
  <StackLayout>
    <CheckBox:CheckBox checked="{{ checkProp }}" text="{{ myCheckText }}" fillColor="{{ myCheckColor }}" id="myCheckbox" />
    <CheckBox:CheckBox text="CheckBox Label" checked="false" />
  </StackLayout>
</Page>

import { CheckBox } from 'nativescript-checkbox';
import { topmost } from 'ui/frame';

public toggleCheck() {
  let checkBox = topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  let checkBox = topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}

Angular Usage Sample:

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);
    }
}

<StackLayout>
    <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
    <Button (tap)="toggleCheck()" text="Toggle it!"></Button>
    <Button (tap)="getCheckProp()" text="Check Property"></
</StackLayout>

Properties

• checked - boolean
• text - text to use with the checkbox
• fillColor - Color of the checkbox element

API

• toggle() - Change the checked state of the view to the inverse of its current state.

Css Styling

• color - set the text label color
• font-size - checkbox is sized to text from here : default 15
• border-width - set the line width of the checkbox element: iOS only

Styling [Android]

• checkStyle - set to the name of your drawable
• checkPadding - set the padding of the checkbox

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:state_checked="true" android:drawable="@drawable/ic_checkbox_checked_incomplete" />
    <item android:state_enabled="false" android:state_checked="false" android:drawable="@drawable/ic_checkbox_grey_incomplete" />
    <item android:state_checked="true" android:drawable="@drawable/ic_checkbox_checked_grey"/>
    <item android:state_checked="false" android:drawable="@drawable/ic_checkbox_grey" />
</selector>

Demo Setup

• npm install tns-platform-declarations
• npm preparedemo
• npm run demo.ios

Contributors

|
_{Brad Martin} |
_{Steve McNiven-Scott} |
_{Osei Fortune} |
_{Nathan Walker} | |---|---|---|---|---|