この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。
先日その紹介ブログを書きました。
もっと触ってみたくなったので、色々と触っていきたいと思います。まずはよくある「アラートを表示する」をやってみました。
事前準備
こちらのブログ を通して作成したプロジェクトをベースに進めます。
アラートを表示する
Home.vue
にアラートを表示するボタンを置き、そのクリックイベントでアラートを実際に表示します。
Home.vue
<template>
<div class="ion-page">
<ion-header>
<ion-toolbar>
<ion-title>Hello World</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Welcome To @ionic/vue</h1>
<img alt="Vue logo" src="../assets/logo.png" />
<ion-button @click="onClick" full>Go to About Page</ion-button>
<ion-button @click="showAlert" full>Show Alert</ion-button>
</ion-content>
</div>
</template>
<script>
export default {
name: "home",
methods: {
onClick () {
this.$router.push('about')
},
showAlert() {
return this.$ionic.alertController
.create({
header: 'アラートのヘッダー',
subHeader: 'アラートのサブヘッダー',
message: 'メッセージ <strong>です</strong>!!!',
buttons: [
{
text: 'キャンセル',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('キャンセル')
},
},
{
text: 'OK',
handler: () => {
console.log('OK')
},
},
],
})
.then(a => a.present())
}
}
}
</script>
AlertController を使います。インスタンスは this.$ionic.alertController
で取得することができます。
create()
メソッドで実際に作るアラートの詳細を設定します。 buttons
には表示したいボタンを置きつつ handler
に関数を渡し、ハンドリングできるようにします。
戻り値は Promise になっているので then()
でチェーンし、実際に作成されたインスタンスを present()
で表示します。
これで以下のようなアラートが表示されます。
柔軟に利用できるアラートを活用しよう
アラートに表示できる内容は幅広いので、利用率は高いと思います。大事な処理にはホウレンソウをしっかり行いましょう!