Marketplace
作者 NativeScript.org
NativeScript DropDown
由Peter Staev编写 | v6.0.2
一个 NativeScript DropDown 小部件。
npm i --save nativescript-drop-down

贡献 - 欢迎帮助

此插件由 NativeScript 社区支持。所有 Pull Request 都受欢迎，但在创建新的 Pull Request 之前，请确保演示应用程序正常工作。如果您没有遇到任何问题但想为此插件做出贡献，您可以在这里找到正在进行中的问题列表。

创建 Pull Request 清单

  • 复制仓库
  • 添加新功能或修复问题，并将其推送到您的复制仓库
  • 启动 demo 和 demo-ng 应用程序，并确保它们正常工作（确保在 iOS 和 Android 上都没有抛出控制台错误）
  • 从您的复制仓库创建一个指向此存储库 'master' 分支的 Pull Request

感谢您的贡献。

NativeScript DropDown 小部件

Build Status npm downloads npm downloads npm

一个 NativeScript DropDown 小部件。DropDown 显示用户可以从中选择一个项的列表。对于 iOS，它将一个 UILabel 包装起来，将 inputView 设置为一个 UIPickerView，该视图显示项。对于 Android，它包装了 Spinner 小部件。

屏幕截图

Screenshot of iOS and Android

安装

从您的项目的根目录运行以下命令

tns plugin add nativescript-drop-down

此命令会自动安装必要的文件，并将 nativescript-drop-down 存储为项目 package.json 文件中的依赖项。

配置

无需额外配置！

API

事件

  • opened
    当 DropDown 打开时触发。

  • closed
    当 DropDown 关闭时触发。

  • selectedIndexChanged
    当用户更改 DropDown 中的选择时触发

静态属性

  • openedEvent - String
    用于挂钩 opened 事件的字符串值。

  • closedEvent - String
    用于挂钩 closed 事件的字符串值。

  • selectedIndexChangedEvent - String
    用于挂钩 selectedIndexChanged 事件的字符串值。

实例属性

  • ios - UILabel
    获取表示此组件用户界面的原生 iOS 视图。仅在运行 iOS 时有效。

  • android - android.widget.Spinner
    获取表示此组件用户界面的原生 android 小部件。仅在运行 Android 操作系统时有效。

  • items - Array | ItemsSource
    获取或设置 DropDown 的项集合。项属性可以设置为数组或定义长度和 getItem(index) 方法的对象。

  • selectedIndex - Number
    获取或设置 DropDown 的选中索引。

  • hint - String
    获取或设置 DropDown 的提示。

  • isEnabled - boolean
    获取或设置下拉列表是否启用。如果您想应用特定的样式，可以使用:disabled伪CSS选择器。

  • accessoryViewVisible - 布尔值（默认：true）
    获取/设置在iOS下是否会有一个附加视图（带完成按钮的工具栏）。仅在iOS上有效。

  • itemsTextAlignment - 字符串 获取或设置DropDown中项的对齐方式。

  • itemsPadding - 字符串 获取或设置DropDown中项的内边距。

方法

  • open(): void
    打开下拉列表。

  • close(): void
    关闭下拉列表。

用法

您需要在您的页面标签中添加xmlns:dd="nativescript-drop-down"，然后只需在页面中使用<dd:DropDown/>即可将小部件添加到页面中。

<!-- 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 }}" 
                 opened="dropDownOpened" closed="dropDownClosed" 
                 selectedIndexChanged="dropDownSelectedIndexChanged"
                 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");
import { SelectedIndexChangedEventData } from "nativescript-drop-down";

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;
}

export function dropDownOpened(args: EventData) {
    console.log("Drop Down opened");
}

export function dropDownClosed(args: EventData) {
    console.log("Drop Down closed");
}

export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
    console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
}

在Angular中的用法

迁移到3.0+
  • 删除
registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown);`
  • 在NgModule中导入DropDownModule
import { DropDownModule } from "nativescript-drop-down/angular";
//......
@NgModule({
	//......
	imports: [
        //......
		DropDownModule,
        //......
	],
    //......
})
示例用法
// main.ts
import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { DropDownModule } from "nativescript-drop-down/angular";
import { AppComponent } from "./app.component";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        DropDownModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
<!-- app.component.html -->
<StackLayout>
    <GridLayout rows="auto, auto, *"
                columns="auto, *">
        <DropDown #dd
                  backroundColor="red"
		  itemsTextAlignment="center"
                  [items]="items"
                  [(ngModel)]="selectedIndex"
                  (selectedIndexChanged)="onchange($event)"
                  (opened)="onopen()"
                  (closed)="onclose()"
                  row="0"
                  colSpan="2"></DropDown>
        <Label text="Selected Index:"
               row="1"
               col="0"
               fontSize="18"
               verticalAlignment="bottom"></Label>
        <TextField [text]="selectedIndex"
                   row="1"
                   col="1"></TextField>
    </GridLayout>
</StackLayout>
// app.component.ts
import { Component } from "@angular/core";
import { SelectedIndexChangedEventData } from "nativescript-drop-down";

@Component({
    selector: "my-app",
    templateUrl:"app.component.html",
})
export class AppComponent {
    public selectedIndex = 1;
    public items: Array<string>;
 
    constructor() {
        this.items = [];
        for (var i = 0; i < 5; i++) {
            this.items.push("data item " + i);
        }
    }

    public onchange(args: SelectedIndexChangedEventData) {
        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
    }

    public onopen() {
        console.log("Drop Down opened.");
    }

    public onclose() {
        console.log("Drop Down closed.");
    }
}
在Angular中设置selectedIndex值

获取子下拉列表组件的实例如下

@ViewChild('dd') dropDown: ElementRef;
// set the index programatically from the parent component
this.dropDown.nativeElement.selectedIndex = <some number from code>

处理值和显示成员

通常情况下，您希望在下拉列表中显示一个项目，然后获取与文本相关联的后端值。例如，带有状态的下拉列表中，您可能想显示完整的状态名称（例如佛罗里达），然后在后端操作时使用状态代码（例如FL）。DropDown的项属性可以设置为对象数组或实现getItem(index: number): any函数和length属性的定制对象。在插件3.0版本中，它内置了一个类，可以帮助您处理这种情况。

import { ValueList } from "nativescript-drop-down";

然后您可以设置DropDown的items属性为ValueList的实例

let dd = page.getViewById<DropDown>("dd");
let itemSource = new ValueList<string>([
    { value: "FL", display: "Florida" }, 
    { value: "MI", display: "Michigan" }
]);
dd.items = itemSource;

这使您可以执行如下操作
1.如果您想根据后端值（例如FL）在下拉列表中选择一个项，您可以这样做

dd.selectedIndex = itemSource.getIndex("FL");

2.您可以使用以下方式获取用户选择的项的后端值

let selectedValue = itemSource.getValue(dd.selectedIndex);

演示

此存储库包含Angular和纯NativeScript演示。要运行这些演示，请在您的shell中执行以下操作

$ git clone https://github.com/peterstaev/nativescript-drop-down
$ cd nativescript-drop-down
$ npm install
$ npm run demo-ios

这将运行纯NativeScript演示项目在iOS上。如果您想在Android上运行它，只需使用-android而不是-ios后缀。

如果您想运行Angular演示，只需使用demo-ng-前缀而不是demo-。

捐赠

Donate

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

Donate