[하이브리드앱 ionic]시작해보기 5 - 다양한 컴포넌트 만들기

컴포넌트 예제 확인하기 - 아래 링크를 통해 쉽게 따라할 수 있다. 

https://ionicframework.com/docs/v3/components/#overview

Ionic Framework

 

컴포넌트에 대한 설명은 아래 링크에서 확인

https://ionicframework.com/docs/api/action-sheet

ion-action-sheet - Ionic Documentation

 

 

1. checkbox 

 

기본형태

<ion-checkbox></ion-checkbox>

 

 

여러가지 형태로 추가 가능.

 <!-- Default Checkbox 기본형태 --> 
<ion-checkbox></ion-checkbox>

<!-- Disabled Checkbox 선택할 수 없음 -->
<ion-checkbox disabled="true"></ion-checkbox>

<!-- Checked Checkbox 선택되어있음 -->
<ion-checkbox checked="true"></ion-checkbox>

<!-- Checkbox Colors 각 색이 적용된 체크박스 -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>

<!-- Checkboxes in a List 리스트 형태의 체크박스 -->
<ion-list>
  <ion-item *ngFor="let entry of form">
    <ion-label>{{entry.val}}</ion-label>
    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
  </ion-item>
</ion-list>

 

리스트형태의 체크박스는 타입스크립트로 리스트를 정의한다. 

  public form = [
    { val: 'Pepperoni', isChecked: true },
    { val: 'Sausage', isChecked: false },
    { val: 'Mushroom', isChecked: false }
  ];

 

 

결과는 아래와 같다. 

 

 

2. datetime

각종 옵션을 줄 수 있습니다. 

<ion-item>
  <!-- 월선택 -->
  <ion-label>MMMM</ion-label>
  <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
  
<ion-item>
  <!-- 년월일 선택  -->
  <ion-label>MM DD YY</ion-label>
  <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>
  
<ion-item>
  <!-- 년도 선택  customPickerOptions - 옵션 정의 (타입스크립트 ) / min - max 로 범위 설정  -->
  <ion-label>YYYY</ion-label>
  <ion-datetime [pickerOptions]="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>
  
<ion-item>
  <!-- customDayShortNames로 요일 이름 옵션지정  -->
  <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
  <ion-datetime value="1995-04-15" min="1990-02" max="2000"
     [dayShortNames]="customDayShortNames"
     displayFormat="DDD. MMM DD, YY"
     monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
  </ion-item>
  
 <ion-item>
   <!-- 시간선택  -->
   <ion-label>HH:mm</ion-label>
   <ion-datetime displayFormat="HH:mm"></ion-datetime>
 </ion-item>

 

옵션에 대한 타입스크립트

  customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
  customPickerOptions: any;

  constructor() {
    this.customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
      }, {
        text: 'Log',
        handler: () => {
          console.log('Clicked Log. Do not Dismiss.');
          return false;
        }
      }]
    }
  }

 

요일에 대한 옵션

customDayShortNames에 지정한 이름으로 요일을 출력 

 

customPickerOptions 옵션은 아래 이미지의 save와 log와 같은 옵션 결과를 확인 할 수 있습니다.