@webileapps/nativescript-radiobutton
A plugin for nativescript that exposes the radiogroup and radiobutton native view elements.
npm i --save @webileapps/nativescript-radiobutton
- Version: 0.2.7
- GitHub: https://github.com/WebileApps/nativescript-radiobutton
- NPM: https://www.npmjs.com/package/%40webileapps%2Fnativescript-radiobutton
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
NativeScript-RadioButton
This is a fork of other NativeScript plugin for the native radiogroup and radiobutton widget.
Changes from the original plugin
- Support for
tintColor
xml property ( ortint-color
css property). - Make
color
xml (and css property) work correctly.
Platform controls used:
Android | iOS |
---|---|
Android RadioGroup | NONE |
Android RadioButton | NONE |
Installation
From your command prompt/terminal go to your app's root folder and execute:
tns plugin add @webileapps/nativescript-radiobutton
Usage
Demo App
If you want a quickstart, clone the repo, cd src
, and execute the following commands:
npm install
npm run demo.android
Angular
Import to NgModule for use
import { RadioButtonModule } from '@webileapps/nativescript-radiobutton/angular'
@NgModule({
imports: [
RadioButtonModule
]
})
Place this in your view.
<StackLayout>
<RadioGroup [(value)]="dataBoundVariable">
<RadioButton text="Selection 1"></RadioButton>
<RadioButton text="Selection 2"></RadioButton>
<RadioButton text="Selection 3"></RadioButton>
</RadioGroup>
</StackLayout>
NativeScript-Vue
In your main.js
register both RadioGroup
and RadioButton
elements
Vue.registerElement('RadioGroup', () => require('@webileapps/nativescript-radiobutton').RadioGroup)
Vue.registerElement('RadioButton', () => require('@webileapps/nativescript-radiobutton').RadioButton)
And in your template, use it
<RadioGroup
@selected="onSelected">
<RadioButton
v-for="item in someList"
:key="item.id"
:text="item.text">
</RadioButton>
</RadioGroup>
Supported Properties
RadioButton
Android | Example |
---|---|
enabled | enabled="true | false" |
text | text="a string" |
checked | checked="true | false" |
RadioGroup
Android | Returns |
---|---|
value | the index of the radio button selected |
Supported Events
RadioGroup
Android | Type |
---|---|
value | EventEmitter |