Ionic AngularのUI使い方まとめ

2019-10-21

Ionic AngularのUIは素晴らしく、非常にたくさんのコンポーネントが用意されている。多くの場合、公式リファレンスにそってやれば問題ないが、説明が不足していたりわかりにくいものもあるのでメモするようにここに記載していく。
またそれUIコンポーネント以外のマークアップ関連のことも書いていく。随時追加・修正予定。

ion-slides

よく使いそうなスライドUI。特に現在の表示されているスライドのindexの取得など重要。
test.page.html

<ion-slides #slides [options]="slideOpts" (ionSlideDidChange)="slideDidChange($event)">
    <ion-slide>1</ion-slide>
    <ion-slide>2</ion-slide>
</ion-slides>

test.page.ts

import {
  Component, ViewChild
} from '@angular/core';
import {IonSlides} from "@ionic/angular";

@Component({
})
export class TestPage {
  @ViewChild('slides', { static: true }) slider: IonSlides;
  slideOpts = {
    initialSlide: 0,
    speed: 400
  };

  constructor() { }

  slideNext() {
    this.slider.slideNext();
  }
  slidePrev() {
    this.slider.slidePrev();
  }
  // 選択しているスライダーのindex取得
  async slideDidChange(event) {
    const i = await this.slider.getActiveIndex()
  }
}

ion-picker

showPickerをコールするとpickerが起動する。特にピッカーの初期値（デフォルト選択）の指定方法に注意。
app.component.ts

import { PickerController } from '@ionic/angular';
export class AppComponent {

  constructor(private pickerCtrl: PickerController) {}
  async showPicker() {
    let opts = {
      buttons: [
        {
          text: '',
          role: 'cancel'
        },
        {
          text: 'OK'
        }
      ],
      columns: [
        {
          name: 'number',
          selectedIndex: 0, // 初期選択indexを指定
          options: [
            { text: '1', value: 1 },
            { text: '2', value: 2 },
            { text: '3', value: 3 }
          ]
        }
      ]
    };
    let picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      let col = await picker.getColumn('number');
      console.log(col.selectedIndex) // 選択したindex
    });
  }
}

fill_parent（高さを埋める）

Androidでいうmatch_parent、fill_parentや、iOSでのstoryboardでの幅を埋めるやつ。これはionicでのHTML・CSSでは存在しない指定方法のようだ。
例えば、以下の例。「second」の高さを画面高さの余白分にしたい時。

app.component.html

<ion-content>
    <div class="first">first</div>
    <div class="second">second</div>
</ion-content>

app.component.scss

.first {
    height: 50px;
}
.second {
    height:calc(100vh - 50px);
}

でもこれだと、「first」の高さが確実にわかっていて、かつ、他の要素が存在しないことが前提になっているので、汎用性はかなり低い。
以下だと無理やり余白を埋めることができる。
app.component.scss

ion-content {
  --overflow: hidden;
}
.first {
    height: 50px;
}
.second {
    padding-bottom: 9999px;
    overflow: hidden;
}

かなり無理やりだが、余白を埋めたい要素の高さを確実にはみ出るサイズに指定して、親要素をスクロールさせないようにする。

ion-itemのカラー

ion-listやion-selectの外側のion-itemに対してのborderやbackgroundのカラー変更は以下のようにする。

ion-item {
  --ion-background-color:#fff;
  --border-color: #fff;
}

Angular, ionicangular, ionic