ionic selectable

Ionic Selectable v5(alpha) はこちら

Vanilla JS の@ionic-selectable/core

@ionic-selectable/angular (Angular の場合)

• ステンシルで作りました
• Webコンポーネント
• バニラ JS のサポート
• Angular のサポート
• 他のフレームワークもサポートされる予定です。
• 詳細情報

イオン選択可能

デモ |特長 |はじめに |よくある質問 |ドキュメント

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. インポートしてください。
   まず、通常はsrcappapp.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>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. ライブデモをチェックして、その機能を確認してください。
   また、ドキュメントと FAQ を参照して、機能の詳細を確認してください。

発達

貢献と育成については、「貢献」を参照してください。

共有する

このコンポーネントが役立つと思われる場合は、リポジトリにスターを付けて、それが信頼できるものであることを他の人に知らせてください。また、役立つと思われる友人や同僚と共有してください。ありがとう ？