유용한 컴포넌트 소개

아이오닉 컴퍼넌트의 간단한 소개와 사용법 입니다. 사이트

UI Components - Ionic Documentation

 

<ion-lable>

텍스트를 스타일링해 주는 <H1>, <p> 테그와 사용하면 더욱 좋은 스타일링과 이팩트를 줄 수 있습니다.

위와 같이 <ion-input> 태그와 함께 사용합니다.

<ion-label position="floationg">
  <h1> ... </h1>
</ion-label>


<ion-item>
  <ion-label>
    <ion-input>...</ion-input>
  </ion-label>
<ion-item>

 

<ion-text>

text만 스타일링 할 경우 사용합니다.

 

<ion-item-sliding> - Swipable List Item

왼쪽 오른쪽으로 밀어서 작동합니다.

<ion-list>
  <ion-item-sliding *ngFor="let item of items" #slidingItem>
    <ion-item-options side="start" >
        <ion-item-option
          color="secondary"
          (click)="onEdit(item.id, slidingItem)"
        >
          <ion-icon name="create" slot="icon-only"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    <ion-item
      [routerLink]="['클릭시 이동할 주소']"
    >
      <ion-thumbnail slot="start">
        <ion-img [src]="item.imageUrl"></ion-img>
      </ion-thumbnail>
      <ion-label>
        <h1>{{ item.title }}</h1>
      </ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option
        color="danger"
        (click)="onCancel(item.id, slidingItem)"
      >
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

스타일링을 위해 ion-icon등을 사용했지만.

기본 틀은 아래와 같습니다.

<ion-list>
  <!-- Sliding item with text options on both sides -->
  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
      <ion-item-option color="danger" (click)="share(item)">Share</ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label>Item Options</ion-label>
    </ion-item>

    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

<ion-item-option>을 이용하여 사용하게 됩니다.

<ion-item-options side="strart">와 같이 side의 값으로 위치를 결정됩니다.

side의 값에 따라: start는 왼쪽, end는 오른쪽에 위치하게 됩니다.

 

<ion-virtual-scroll>

화면에 보이는 곳만 리스트를 보여줍니다.

성능의 최적화를 위해 사용하며, 50개 이상일 경우 이득이 있습니다.

<ion-content>
  <ion-virtual-scroll [items]="items" approxItemHeight="320px">
    <ion-card *virtualItem="let item; let itemBounds = bounds;">
      <div>
        <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
      </div>
    <ion-card-header>
      <ion-card-title>{{ item.name }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>{{ item.content }}</ion-card-content>
    </ion-card>
  </ion-virtual-scroll>
</ion-content>

 

위와 같이 사용하며, <ion-list>대신 <ion-virtual-scroll>를 사용해야 합니다.

또한 *ngFor대신 [items]="구릅대상" 으로 진행합니다.

 <ion-virtual-scroll [items]="items" approxItemHeight="320px">
    <ion-card *virtualItem="let item; let itemBounds = bounds;">

 

이미지 Element 추가하기

Lazy 로딩이기 때문에, <ion-img>는 래핑을 필요합니다.

<ion-thumbnail> 혹은 <ion-avartar>를 사용하길 추천합니다.

 

<ion-segment> 

tab은 각 페이지를 이동시 사용하는 대신, segment는 버튼으로 필터등의 용도로 사용됩니다.

<ion-segment (ionChange)="segmentChanged($event)">
  <ion-segment-button value="friends">
    <ion-label>Friends</ion-label>
  </ion-segment-button>
  <ion-segment-button value="enemies">
    <ion-label>Enemies</ion-label>
  </ion-segment-button>
</ion-segment>

 

버튼의 작동은, 이벤트를 전송하는 방식으로 합니다.

//file.ts

segmentChanged(event: CustomEvent<SegmentChangeEventDetails>) {
  ...
}

<ion-spinner>

<!-- Default Spinner -->
<ion-spinner></ion-spinner>

<!-- Lines -->
<ion-spinner name="lines"></ion-spinner>

<!-- Lines Small -->
<ion-spinner name="lines-small"></ion-spinner>

<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>

<!-- Bubbles -->
<ion-spinner name="bubbles"></ion-spinner>

<!-- Circles -->
<ion-spinner name="circles"></ion-spinner>

<!-- Crescent -->
<ion-spinner name="crescent"></ion-spinner>

<!-- Paused Default Spinner -->
<ion-spinner paused></ion-spinner>

 

위와같이 쉽게 이용할 수 있습니다.

다만 ts로 스피너가 작동할 시간을 정해야 합니다.

// file.ts
// LodingController를 import해서 사용합니다.

constructor(loadingCtrl: LoadingController) {}

  openSpinner() {
    this.loadingCtrl({keyboardClose:true, message:"..."})
      .then(loadingEl => {
        loadingEl.present();
        shomeMethod().subscribe(() => {
          loadingEl.dismiss();
        })
    })
  }

LoadingController를 import해서 사용해야 합니다.

loadingEl의 present()와 dismiss()로 시작과 종료를 명시해주어야 합니다.

 

<ion-action-sheet>

"Show Action Sheet" 버튼을 누르면 아래에서 창이 나타나는 기능입니다.

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

}

create매쏘드를 이용해서 각 버튼의 넥스트와 기능을 명시해주어야 합니다.

ActionSheetController라는 컨트롤러를 import해서 사용합니다.