ionic selectable

Ionic Selectable v5（alpha）在这里

Vanilla JS 的@ionic-selectable/core

@ionic-selectable/angular用于 Angular

• 用模板制作
• 网络组件
• 支持 Vanilla JS
• 支持角度
• 其他框架支持即将到来！
• 更多信息

离子可选

演示 |特点|开始使用 |常见问题 |文档

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

内容

• 演示
• 特征
• 入门
• 支持的 Ionic 版本
• 常问问题
• 文档
• 主题化

支持的 Ionic 版本

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

特征

• 单选
• 多项选择
• 搜索项目
• 异步搜索项目
• 按多个项目字段搜索
• 表格
• 无限滚动
• 虚拟卷轴
• 模板
• 对项目进行分组
• 编辑、添加和删除项目
• 禁用项目

入门

1. 安装它。

 // Ionic 3
npm install [email protected] --save

// Ionic 4
npm install [email protected] --save

// Ionic 7 with Angular 16 Standalone component
npm install [email protected] --save

2. 导入它。
   首先，将IonicSelectableModule导入到通常位于srcappapp.module.ts的app.module.ts中。

 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>Port</ion-label>
  <ionic-selectable
    item-content // Required for Ionic 3 only.
    [(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: 'Tokai' },
      { id: 2, name: 'Vladivostok' },
      { id: 3, name: 'Navlakhi' }
    ];
  }

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

5. 好好享受
6. 查看现场演示，了解它的功能。
   另外，请浏览文档和常见问题解答以了解有关其功能的更多信息。

发展

贡献及开发请参见贡献。

分享一下

如果您发现此组件有用，请为该存储库加注星标，让其他人知道它是可靠的。另外，与可能也会发现它有用的朋友和同事分享。谢谢 ？