NativeScript plugin for checkbox UI component
OTHER License
From your command prompt/terminal go to your app's root folder and execute:
ns plugin add @nstudio/nativescript-checkbox
tns plugin add @nstudio/[email protected]
Android | iOS |
---|---|
Android CheckBox | BEMCheckBox |
Android Sample | iOS Sample |
---|---|
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:CheckBox="@nstudio/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 '@nstudio/nativescript-checkbox';
import { topmost } from '@nativescript/core/ui/frame';
public toggleCheck() {
const checkBox = topmost().getViewById('yourCheckBoxId');
checkBox.toggle();
}
public getCheckProp() {
const checkBox = topmost().getViewById('yourCheckBoxId');
console.log('checked prop value = ' + checkBox.checked);
}
import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';
@NgModule({
imports: [TNSCheckBoxModule]
// etc.
})
export class YourModule {}
// component:
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"></button>
</StackLayout>
In your main.js
(The file where the root Vue instance is created) register the element
Vue.registerElement(
'CheckBox',
() => require('@nstudio/nativescript-checkbox').CheckBox,
{
model: {
prop: 'checked',
event: 'checkedChange'
}
}
);
And in your template, use it as:
<check-box :checked="isChecked" @checkedChange="isChecked = $event.value" />
Use checked
instead of v-model
. See #99.
circle
on iOS and square
on Android? Just make the boxType
value conditional.checked
property when this event fires to see the new value.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>
Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?
Set boxType="circle"
and check out the second tab in the Angular demo, here's a screenshot:
npm run demo.android
npm run demo.ios
npm run demo.ng.android
(for angular android)npm run demo.ng.ios
(for angular ios)