NativeScript DropDown widget

A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a UITextField with an inputView set to an UIPickerView which displays the items. For Android it wraps up the Spinner widget.

Screenshot

Installation

Run the following command from the root of your project:

tns plugin add nativescript-drop-down

This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.

Usage

You need to add xmlns:dd="nativescript-drop-down" to your page tag, and then simply use <dd:DropDown/> in order to add the widget to your page.

API

Static Properties

• itemsProperty - Property
  Represents the observable property backing the items property of each DropDown instance.

• selectedIndexProperty - Property
  Represents the selected index property of each DropDown instance.

Instance Properties

• ios - UITextField
  Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

• android - android.widget.Spinner
  Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

• items - Object
  Gets or sets the items collection of the DropDown. The items property can be set to an array or an object defining length and getItem(index) method.

• selectedIndex - Number
  Gets or sets the selected index of the DropDown.

• accessoryViewVisible - boolean (Default: true)
  Gets/sets whether there will be an accessory view (toolbar with Done button) under iOS. Valid only when running on iOS.

Example

<!-- test-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:dd="nativescript-drop-down">
  <GridLayout rows="auto, auto, *" columns="auto, *">
    <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" row="0" colSpan="2" />
    <Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"/>
    <TextField text="{{ selectedIndex }}" row="1" col="1" />
  </GridLayout>
</Page>

// test-page.ts
import observable = require("data/observable");
import observableArray = require("data/observable-array");
import pages = require("ui/page");

var viewModel: observable.Observable;

export function pageLoaded(args: observable.EventData) 
{
    var page = <pages.Page>args.object;
    var items = new observableArray.ObservableArray();

    viewModel = new observable.Observable();

    for (var loop = 0; loop < 20; loop++)
    {
        items.push("Item " + loop.toString());
    }

    viewModel.set("items", items);
    viewModel.set("selectedIndex", 15);

    page.bindingContext = viewModel;
}