Ionic Selectable v5(alpha)版本已经到来

适用于原生JavaScript的@ionic-selectable/core

适用于Angular的@ionic-selectable/angular

• 使用stencil构建
• Web组件
• 支持原生JavaScript
• 支持Angular
• 即将支持其他框架！！！
• 更多信息

Ionic Selectable

演示 | 功能 | 入门指南 | [常见问题](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#faq | [文档](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki

这是一个类似于Ionic Select的Ionic组件，允许搜索项目，包括异步搜索、无限滚动等功能。

目录

• 演示
• 功能
• 入门指南
• 支持的Ionic版本
• [常见问题](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#faq
• [文档](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki
• [主题设置](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#theming

支持的Ionic版本

• Ionic 3 (3.6.0 - 3.9.2)
• Ionic 4 (>=4.0.0)
• Ionic 7 独立组件 (>=5.0.2)

功能

• 单项选择
• [多项选择](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#ismultiple
• 搜索项目
• 异步搜索项目
• 按多个项目字段搜索
• 表单
• 无限滚动
• 虚拟滚动
• [模板](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#templates
• [项目分组](https://github.com/eakoriakin/ionic-selectable/blob/main/../..//wiki#grouping
• [编辑、添加和删除项目](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#editing
• [禁用项目](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#disableditems

开始使用

1. 安装。

// Ionic 3
npm install ionic-selectable@3.5.0 --save

// Ionic 4
npm install ionic-selectable@4.8.0 --save

// Ionic 7 with Angular 16 独立组件
npm install ionic-selectable@5.0.2 --save

2. 导入。 首先，在通常位于 src\app\app.module.ts 的 app.module.ts 中导入 IonicSelectableModule。

import { IonicSelectableModule } from 'ionic-selectable';

@NgModule({
  imports: [
    IonicSelectableModule
  ]
})
export class AppModule { }

对于 Angular 16 独立组件

import { IonicSelectableComponent } from 'ionic-selectable';

@Component({
    ...,
    standalone: true,
    imports: [IonicSelectableComponent]
})

**注意：**此外，如果你使用的是 Ionic 3+，你可能还在使用延迟加载页面。检查你的页面是否有模块文件，例如 home.module.ts，如果有，也要在每个页面模块中导入 IonicSelectableModule。

import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    IonicSelectableModule
  ]
})
export class HomePageModule { }

3. 添加到模板。

<ion-item>
  <ion-label>端口</ion-label>
  <ionic-selectable
    item-content // 仅 Ionic 3 需要。
    [(ngModel)]="port"
    [items]="ports"
    itemValueField="id"
    itemTextField="name"
    [canSearch]="true"
    (onChange)="portChange($event)">
  </ionic-selectable>
</ion-item>

4. 配置。

import { IonicSelectableComponent } from 'ionic-selectable';

class Port {
  public id: number;
  public name: string;
}

@Component({ ... })
export class HomePage {
  ports: Port[];
  port: Port;
constructor() {
  this.ports = [
    { id: 1, name: '东海' },
    { id: 2, name: '符拉迪沃斯托克' },
    { id: 3, name: '纳夫拉基' }
  ];
}

portChange(event: {
  component: IonicSelectableComponent,
  value: any
}) {
  console.log('港口:', event.value);
}
}

5. 尽情享用 😉
6. 查看在线演示以了解它的功能。 另外，浏览文档和常见问题以了解更多特性。

开发

关于贡献和开发，请参考贡献指南。

分享

如果您觉得这个组件有用，请给仓库点个星星，让其他人知道它是可靠的。另外，也可以与可能会觉得它有用的朋友和同事分享。谢谢 😄