ionic selectable

Ionic Selectable v5 (alpha) ada di sini

@ionic-selectable/core untuk Vanilla JS

@ionic-selectable/angular untuk Angular

• Dibuat dengan stensil
• Komponen web
• Dukungan untuk Vanila JS
• Dukungan untuk Sudut
• Dukungan kerangka kerja lainnya akan datang!!!
• Informasi lebih lanjut

Ionik Dapat Dipilih

Demo | Fitur | Memulai | Pertanyaan Umum | dokumen

Komponen Ionic mirip dengan Ionic Select, yang memungkinkan pencarian item, termasuk pencarian asinkron, pengguliran tak terbatas, dan banyak lagi.

Isi

• Demo
• Fitur
• Memulai
• Versi Ionic yang didukung
• Pertanyaan Umum
• dokumen
• Tema

Versi Ionic yang didukung

• Ionik 3 (3.6.0 - 3.9.2)
• Ionik 4 (>=4.0.0)
• Komponen Mandiri Ionic 7 (>=5.0.2)

Fitur

• Pilihan tunggal
• Pilihan ganda
• Cari item
• Cari item secara asinkron
• Cari berdasarkan beberapa bidang item
• Formulir
• Gulir Tak Terbatas
• Gulir Virtual
• Templat
• Mengelompokkan item
• Mengedit, menambah dan menghapus item
• Menonaktifkan item

Memulai

1. Instal itu.

 // 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. Impor itu.
   Pertama, impor IonicSelectableModule ke app.module.ts Anda yang biasanya terletak di srcappapp.module.ts .

 import { IonicSelectableModule } from 'ionic-selectable';

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

Untuk komponen mandiri Angular 16

 import { IonicSelectableComponent } from 'ionic-selectable';

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

Catatan: Selain itu, jika Anda menggunakan Ionic 3+ Anda mungkin juga menggunakan halaman yang dimuat dengan lambat. Periksa apakah halaman Anda memiliki file modul, misalnya home.module.ts , dan jika ada, impor IonicSelectableModule ke setiap modul halaman juga.

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

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

3. Tambahkan ke templat.

 <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. Konfigurasikan itu.

 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. Nikmatilah
6. Lihat demo langsung untuk melihat kemampuannya.
   Jelajahi juga dokumen dan FAQ untuk mempelajari lebih lanjut tentang fitur-fiturnya.

Perkembangan

Untuk kontribusi dan pengembangan silakan lihat Kontribusi.

Bagikan itu

Jika Anda merasa komponen ini berguna, beri bintang pada repo agar orang lain tahu bahwa komponen ini dapat diandalkan. Bagikan juga kepada teman dan kolega yang mungkin merasakan manfaatnya juga. Terima kasih ?