ionic selectable

Ionic Selectable v5(알파) 출시

바닐라 JS용 @ionic-selectable/core

Angular의 경우 @ionic-selectable/angular

• 스텐실로 제작
• 웹 구성요소
• 바닐라 JS 지원
• 각도 지원
• 다른 프레임워크도 지원될 예정입니다!!!
• 추가 정보

이온 선택 가능

데모 | 특징 | 시작하기 | 자주 묻는 질문 | 문서

비동기 검색, 무한 스크롤 등을 포함하여 항목을 검색할 수 있는 Ionic Select와 유사한 Ionic 구성 요소입니다.

내용물

• 데모
• 특징
• 시작하기
• 지원되는 Ionic 버전
• FAQ
• 문서
• 테마

지원되는 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. 라이브 데모를 통해 그것이 무엇을 할 수 있는지 알아보세요.
   또한 해당 기능에 대해 자세히 알아보려면 문서와 FAQ를 살펴보세요.

개발

기여 및 개발에 대해서는 기여를 참조하세요.

공유하세요

이 구성요소가 유용하다고 생각되면 저장소에 별표를 표시하여 다른 사람들에게 이 구성요소가 신뢰할 수 있음을 알려주세요. 또한 유용하다고 생각하는 친구나 동료와도 공유하세요. 감사합니다 ?