FilterSelect

一个 NativeScript 插件，提供用于选择和筛选项目的列表小部件。

示例截图

Android 和 ios

示例 1	示例 2

安装

NativeScript 4.x

tns plugin add nativescript-filter-select

导入 CSS

@import 'nativescript-filter-select/styles.css';

*在添加插件后，请务必运行新的构建，以避免任何问题

纯 NativeScript

重要： 请确保在页面元素中包含 xmlns:FS="nativescript-filter-select"

XML

<Page xmlns:FS="nativescript-filter-select">
   <StackLayout>     
     <FS:FilterSelect 
     items="{{ countries }}"
     hint="Please select some countries" 
     modal_title="Countries" search_param="name" 
     primary_key="code" 
     change="{{ onSelect }}"
     />
   </StackLayout>
</Page>

Angular NativeScript

在组件类中注册插件


import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from 'nativescript-filter-select';
registerElement('FilterSelect', () => FilterSelect);

HTML

    <FilterSelect 
        height="100%"
        [items]="items"
        (change)="onitemselected($event)"
        hint="Please select some items" 
        modal_title="item" search_param="name" 
        primary_key="id">

    </FilterSelect>

属性

有关更多信息，请参阅示例

属性	描述	默认
render	用于渲染 "tags" 或 "label" 或 "drop"	字符串 : tags
multiple	如果设置为 false，则限制选择的选项数量为一个	布尔值 : true
search_param	在 items 对象中搜索字符串值的索引	字符串 : name
item_template	列表项的 XML 模板	字符串 : `<Label col="0" text="{{ ${this._search_param} }}" textWrap="true" />`
change	选择完成后触发的事件处理程序	函数 : 可选 `change(args)`，可以访问选中的项目作为 `args.selected`
modal_title	筛选模态框的标题	字符串 : `请选择项目`
hint	未选择项目时显示的字符串	`请选择一些项目`
items	用于填充选项列表的对象数组	ObservableArray :[]
primary_key	items 对象的唯一索引	字符串 : `id`
selected	标记某些选项为选中的对象数组，选择完成后将是结果	数组: []
disabled	禁用选择按钮	布尔值 : false
allowSearch	启用/禁用模态框中的搜索栏	布尔值 : true
refresh	使用新值刷新筛选选择，适用于远程数据	函数
searchHint	项目模态框中的搜索占位符或提示	"搜索项目"
xbtn	移除标签文本，您可以使用标签图标在这里	"x"
closeText	关闭按钮文本	"关闭"
doneText	完成按钮文本	"完成"
clearText	清除按钮文本	"清除"
selectText	选择按钮文本	"选择"
autofocus	打开模态框时键盘向上，以便您可以开始搜索	false
open()	以编程方式打开模态框	函数
close	关闭事件处理程序，当模态框关闭时触发	您可以通过 `args.selected` 获取选中的数组，如果模态框关闭而没有选择，则数组将为空

模态页面需要 CSS 核心主题样式，如果您没有，请创建自己的样式

查看 styles.css 以便您覆盖或创建自己的样式

别忘了与我们分享您喜欢的样式哦 :D

字体图标

如果您使用下拉渲染，则需要字体图标

您可以为选择触发器添加 fontawsome 图标（提示："{{'fa-list-ul' | fonticon}}"）

查看演示

关于贡献

只需提交一个带有您更改描述的拉取请求或提出您的想法的问题