Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nstudio/nativescript-checkbox
NativeScript plugin for checkbox UI component
https://github.com/nstudio/nativescript-checkbox
android checkbox ios nativescript nativescript-checkbox nativescript-plugin typescript
Last synced: 3 days ago
JSON representation
NativeScript plugin for checkbox UI component
- Host: GitHub
- URL: https://github.com/nstudio/nativescript-checkbox
- Owner: nstudio
- License: other
- Created: 2016-08-01T06:35:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-10T19:59:03.000Z (over 1 year ago)
- Last Synced: 2024-10-29T21:54:22.045Z (3 months ago)
- Topics: android, checkbox, ios, nativescript, nativescript-checkbox, nativescript-plugin, typescript
- Language: TypeScript
- Homepage:
- Size: 3.59 MB
- Stars: 119
- Watchers: 10
- Forks: 56
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.
---
### Installation
From your command prompt/terminal go to your app's root folder and execute:
#### NativeScript 7+:
```bash
ns plugin add @nstudio/nativescript-checkbox
```
#### NativeScript prior to 7:
```bash
tns plugin add @nstudio/[email protected]
```
#### Platform controls used:
| Android | iOS |
| ---------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| [Android CheckBox](https://developer.android.com/reference/android/widget/CheckBox.html) | [BEMCheckBox](http://cocoapods.org/pods/BEMCheckBox) |
## Sample Usage
| Android Sample | iOS Sample |
| ---------------------------------- | ------------------------------------- |
|  |  |
## Usage
###
```XML
```
###
```typescript
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);
}
```
### Angular Usage Sample:
```typescript
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
);
}
}
```
```html
```
### NativeScript-Vue Usage Sample
In your `main.js` (The file where the root Vue instance is created) register the element
```js
Vue.registerElement(
'CheckBox',
() => require('@nstudio/nativescript-checkbox').CheckBox,
{
model: {
prop: 'checked',
event: 'checkedChange'
}
}
);
```
And in your template, use it as:
```html
```
Use `checked` instead of `v-model`. [See #99](https://github.com/nstudio/nativescript-checkbox/issues/99).
## Properties
- **checked** - boolean
- **text** - text to use with the checkbox
- **fillColor** - Color of the checkbox element
- **boxType** - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want `circle` on iOS and `square` on Android? Just make the `boxType` value conditional.
## Events
- **checkedChange** - Use a reference to the CheckBox component to grab it's `checked` property when this event fires to see the new value.
## 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
```
## Radiobuttons, anyone?
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](demo-ng/), here's a screenshot:
## Contributing & Running Demo Apps
- Execute from root:
- For android: `npm run demo.android`
- For iOS: `npm run demo.ios`
- `npm run demo.ng.android` (for angular android)
- `npm run demo.ng.ios` (for angular ios)