@ticnat/nativescript-searchable-select

由于 nativescript 修改了填充 ObservableArray 的方式，并引入了破坏性更改，因此对于 nativescript >= 8.3.0

ns plugin add @ticnat/nativescript-searchable-select

对于 nativescript < 8.3.0

ns plugin add @ticnat/nativescript-searchable-select@1.0.7

FilterSelect

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

示例截图

Android 和 ios

示例 1	示例 2

安装

NativeScript 7.x

tns plugin add @ticnat/nativescript-searchable-select

导入 css

@import '@ticnat/nativescript-searchable-select/styles.css';

*确保在添加插件后运行新的构建以避免任何问题

纯 NativeScript

重要：请确保在 Page 元素中包含 xmlns:SS="@ticnat/nativescript-searchable-select"

XML

<Page xmlns:SS="@ticnat/nativescript-searchable-select">
   <StackLayout>
     <SS:SearchableSelect
     items="{{ countries }}"
     hint="Please select some countries"
     modal_title="Countries" search_param="name"
     primary_key="code"
     change="{{ onSelect }}"
     />
   </StackLayout>
</Page>

或使用内部模板选项

<Page xmlns:SS="@ticnat/nativescript-searchable-select">
    <SS:SearchableSelect render="label" selected="{{ selected }}" items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class="item" height="50" columns="*,100">
              <Label col="0" class="text-center" text="{{ name }}" textWrap="true" />
              <Label col="1" class="text-center" text="{{ code }}" textWrap="true" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>
</Page>

Angular NativeScript

在 Component 类中注册插件


import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from '@ticnat/nativescript-searchable-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
windowHeight	指定选择窗口的高度	数字：70
refresh	刷新筛选选择以使用新值，适合远程数据	函数
searchHint	在项目模态中显示的搜索占位符或提示	"搜索项目"
xbtn	移除标签文本，您可以使用标签图标在这里	"x"
closeText	关闭按钮文本	"关闭"
doneText	完成按钮文本	"完成"
clearText	清除按钮文本	"清除"
selectText	选择按钮文本	"选择"
autofocus	当打开模态时键盘向上，因此您可以从搜索开始	false
open()	以编程方式打开模态	函数
close	模态关闭时的关闭事件处理器	您可以通过 `args.selected` 获取选定的数组，如果模态框关闭时没有进行任何选择，则数组将为空

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

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

别忘了与我们分享您的优秀样式哦 :D

字体图标

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

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

查看示例

许可协议

此插件是基于这个插件构建和维护的，并向 @moayadnajd 表示衷心的感谢

对于贡献

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

需要 NativeScript 项目的速度？我可以根据您的业务需求构建美观且性能卓越的 NativeScript 应用程序。直接给我发邮件讨论项目细节：[email protected]