ionic selectable下載 - ionic selectable原始碼下載

ionic selectable

其他源碼

v5.0.3

下載

Ionic Selectable v5（alpha）在這裡

Vanilla JS 的`@ionic-selectable/core`

`@ionic-selectable/angular`用於 Angular

用模板製作
網路元件
支持 Vanilla JS
支援角度
其他框架支援即將到來！！
更多資訊

離子可選

演示 |特點|開始使用 |常見問題 |文件

類似於 Ionic Select 的 Ionic 元件，允許搜尋項目，包括非同步搜尋、無限滾動等。

iOS 演示

內容

示範
特徵
入門
支援的 Ionic 版本
常問問題
文件
主題化

支援的 Ionic 版本

離子 3 (3.6.0 - 3.9.2)
離子 4 (>=4.0.0)
Ionic 7 獨立組件 (>=5.0.2)

特徵

單選
多項選擇
搜尋項目
非同步搜尋項目
按多個項目字段搜尋
表格
無限滾動
虛擬捲軸
範本
將項目分組
編輯、新增和刪除項目
停用項目

入門

安裝它。

 // 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

導入它。
首先，將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 { }

將其新增至模板。

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

配置它。

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