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

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
• border-width - set the line width of the checkbox element: iOS only

Demo Setup

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