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

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

import{CheckBox}from'nativescript-checkbox';import{topmost}from'ui/frame';publictoggleCheck(){letcheckBox=topmost().getViewById('yourCheckBoxId');checkBox.toggle();}publicgetCheckProp(){letcheckBox=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);exportclassSomeComponent{
@ViewChild("CB1")FirstCheckBox: ElementRef;constructor(){}publictoggleCheck(){this.FirstCheckBox.nativeElement.toggle();}publicgetCheckProp(){console.log('checked prop value = '+this.FirstCheckBox.nativeElement.checked);}}

<StackLayout><CheckBox#CB1text="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"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_enabled="false"android:state_checked="true"android:drawable="@drawable/ic_checkbox_checked_incomplete" />
<itemandroid:state_enabled="false"android:state_checked="false"android:drawable="@drawable/ic_checkbox_grey_incomplete" />
<itemandroid:state_checked="true"android:drawable="@drawable/ic_checkbox_checked_grey"/>
<itemandroid: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} | |---|---|---|---|---|