Skip to content

WebileApps/nativescript-radiobutton

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 ( or tint-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 (selected)="onSelected($event)">
        <RadioButton text="Selection 1"></RadioButton>
        <RadioButton text="Selection 2"></RadioButton>
        <RadioButton text="Selection 3"></RadioButton>
    </RadioGroup>
</StackLayout>
export class MainComponent {

    onSelected($event : SelectedEventData) : void {
        // This will be the text of the radio button selected.
        console.log($event.value);
        // Selection 1
    }
}

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

About

A plugin for nativescript that exposes the radiogroup and radiobutton native view elements.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 52.9%
  • JavaScript 35.8%
  • HTML 6.5%
  • Shell 3.3%
  • CSS 1.5%