ionic selectable

Ionic selecionável v5 (alfa) está aqui

@ionic-selectable/core para Vanilla JS

@ionic-selectable/angular para Angular

• Feito com estêncil
• Componentes da web
• Suporte para Vanilla JS
• Suporte para Angular
• O suporte a outros frameworks está chegando!!!
• Mais informações

Iônico selecionável

Demonstração | Recursos | Primeiros passos | Perguntas frequentes | Documentos

Um componente Ionic semelhante ao Ionic Select, que permite pesquisar itens, incluindo pesquisa assíncrona, rolagem infinita e muito mais.

Conteúdo

• Demonstração
• Características
• Começando
• Versões Ionic suportadas
• Perguntas frequentes
• Documentos
• Tema

Versões Ionic suportadas

• Iônico 3 (3.6.0 - 3.9.2)
• Iônico 4 (>=4,0,0)
• Componente autônomo Ionic 7 (>=5.0.2)

Características

• Seleção única
• Seleção múltipla
• Pesquisar itens
• Pesquisar itens de forma assíncrona
• Pesquise por vários campos de item
• Formulários
• Rolagem Infinita
• Rolagem Virtual
• Modelos
• Agrupando itens
• Editando, adicionando e excluindo itens
• Desativando itens

Começando

1. Instale-o.

 // 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. Importe-o.
   Primeiro, importe IonicSelectableModule para seu app.module.ts que normalmente está localizado em srcappapp.module.ts .

 import { IonicSelectableModule } from 'ionic-selectable';

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

Para componente autônomo Angular 16

 import { IonicSelectableComponent } from 'ionic-selectable';

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

Nota: Além disso, se você usar Ionic 3+, também poderá usar páginas de carregamento lento. Verifique se suas páginas possuem um arquivo de módulo, por exemplo, home.module.ts e, se tiverem, importe IonicSelectableModule para cada módulo de página também.

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

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

3. Adicione-o ao modelo.

 <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. Configure-o.

 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. Apreciá-lo
6. Confira demonstrações ao vivo para ver do que ele é capaz.
   Além disso, explore a documentação e as perguntas frequentes para saber mais sobre seus recursos.

Desenvolvimento

Para contribuição e desenvolvimento, consulte Contribuição.

Compartilhe

Se você achar este componente útil, marque o repositório com estrela para que outras pessoas saibam que ele é confiável. Além disso, compartilhe-o com amigos e colegas que também possam considerá-lo útil. Obrigado ?