差分

このページの2つのバージョン間の差分を表示します。

--- ionic4:ionic-vue [2019/04/29] – [src/router.jsとsrc/App.vueの変更] adash333
+++ ionic4:ionic-vue [2020/12/03] (現在) – [Vue.jsでIonic（@ionic/vue）] adash333
@@ 行 1: / 行 1: @@
 ====== Vue.jsでIonic（@ionic/vue） ======
-Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Inoic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
+→2020年10月 ionic-vueが正式対応したそうです。
+https://i-doctor.sakura.ne.jp/font/?p=45127
+Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
 年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、<wrap hi><wrap em>v-modelが使用できないそうです。</wrap></wrap>（残念、、、）
@@ 行 15: / 行 18: @@
 上記Blogを写経してみたいと思います。
+===== ソースコードとDEMOサイト =====
+ソースコード
+https://github.com/adash333/ionic4-vue-modal
+DEMOサイト
+https://compassionate-neumann-66e20f.netlify.com/
+{{:ionic4:pasted:20190430-144410.png}}
 ===== 開発環境 =====
@@ 行 106: / 行 118: @@
 <code>
-yarn serve
+yarn serve  //または、npm run serve
 </code>
@@ 行 236: / 行 248: @@
 {{:ionic4:pasted:20190429-101604.png}}
+===== src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card) =====
-題名と画像を"%%<div text-center></div>%%"で囲む。
+題名と画像が左寄せになってしまったので、"%%<div text-center></div>%%"で囲んで水平方向真ん中に配置します。
+src/views/Home.vueの変更
+<code>
+      <div text-center>
+        <h1>Welcome To @ionic/vue</h1>
+        <img alt="Vue logo" src="../assets/logo.png">
+      </div>
+</code>
+{{:ionic4:pasted:20190430-130944.png}}
+Aboutページでは、Ionicのcardを使ってみたいと思います。
+参考：https://ionicframework.com/docs/api/card
+参考2：https://ionicframework.com/docs/v3/components/#card-image
+https://ionicframework.com/docs/demos/api/card/madison.jpg から、madison.jpgをダウンロードして、%%src/assets/%%に保存します。
+src/views/About.vue
+<code>
+<template>
+  <div class="ion-page">
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Hello World</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <div text-center>
+        <h1>This is an about page</h1>
+      </div>
+      <router-link to="/">
+        <ion-button color="secondary" expand="full">Home</ion-button>
+      </router-link>
+      <ion-card>
+        <img alt="madison.jpg" src="../assets/madison.jpg">
+        <ion-card-header>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          <ion-card-title>Card Title</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          Keep close to Nature's heart... and break clear away, once in awhile,
+          and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-item href="#">
+          <ion-icon name="wifi" slot="start"></ion-icon>
+          <ion-label>Card Link Item 1</ion-label>
+        </ion-item>
+        <ion-item href="#">
+          <ion-icon name="wine" slot="start"></ion-icon>
+          <ion-label>Card Link Item 2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="warning" slot="start"></ion-icon>
+          <ion-label>Card Button Item 1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="walk" slot="start"></ion-icon>
+          <ion-label>Card Button Item 2</ion-label>
+        </ion-item>
+      </ion-card>
+    </ion-content>
+  </div>
+</template>
+<script>
+export default {
+  name: "about"
+};
+</script>
+</code>
+{{:ionic4:pasted:20190430-134025.png}}
+画像つきカードCardを作成することができました。
+===== ion-modalを試してみる =====
+modalという、リンクをクリックすると一時的に出てくる画面を試してみます。
+src/views/Modal.vueを新規作成し、
+src/views/About.vueに"Open Modal"ボタンを設置し、そのボタンをクリックすると、Modal.vueが表示されるようにします。
+参考：https://ionicframework.com/docs/api/modal
+{{:ionic4:pasted:20190430-134513.png}}
+src/views/Modal.vueを新規作成
+<code>
+<template>
+  <div>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ title }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      {{ content }}
+    </ion-content>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Modal',
+  props: {
+    title: { type: String, default: 'Super Modal' },
+  },
+  data() {
+    return {
+      content: 'Content',
+    }
+  },
+}
+</script>
+</code>
+{{:ionic4:pasted:20190430-134720.png}}
+src/views/About.vue
+<code>
+// <template>内に、
+<div text-center>
+  <ion-button color="success" fill="outline" @click="openModal">Open Modal</ion-button>
+</div>
+// <script>内は、以下のように
+<script>
+import Modal from './modal.vue'
+export default {
+  name: "about",
+  methods: {
+    openModal() {
+      return this.$ionic.modalController
+        .create({
+          component: Modal,
+          componentProps: {
+            data: {
+              content: 'New Content',
+            },
+            propsData: {
+              title: 'New title',
+            },
+          },
+        })
+        .then(m => m.present())
+    },
+  },
+}
+</script>
+</code>
+{{:ionic4:pasted:20190430-141043.png}}
+{{:ionic4:pasted:20190430-141132.png}}
+{{:ionic4:pasted:20190430-141155.png}}
+Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。
+==== Modal画面を閉じるボタンの実装（$ionic.modalController.dismiss()） ====
+Modal画面を閉じるボタンを設置する場合は、Modal.vueの<template>内に%%@click="closeModal"%%のようにcloseModal関数を記載し、<script>内にmethodsでcloseModal()関数を定義します。
+src/views/Modal.vue
+<code>
+// <template>内に以下を記載
+      <div text-center>
+        <ion-button @click="closeModal">close modal</ion-button>
+      </div>
+// <script>内に以下を記載
+  methods: {
+    closeModal() {
+      return this.$ionic.modalController.dismiss();
+    }
+  }
+</code>
+{{:ionic4:pasted:20190430-142909.png}}
+{{:ionic4:pasted:20190430-142948.png}}
+{{:ionic4:pasted:20190430-143008.png}}
+これで、Modal画面の作成と、Modal画面を閉じるボタンの実装を行うことができました。
+===== ソースコードとDEMOサイト =====
+ソースコード
+https://github.com/adash333/ionic4-vue-modal
+DEMOサイト
+https://compassionate-neumann-66e20f.netlify.com/
+{{:ionic4:pasted:20190430-144410.png}}
+{{:ionic4:pasted:20190430-144428.png}}
+{{:ionic4:pasted:20190430-144515.png}}
+{{:ionic4:pasted:20190430-144529.png}}
-src/Home.vueの変更
@@ 行 300: / 行 521: @@
 今さら聞けない？Vue Router
+===== ionicのcardのリンク =====
+年4月現在、IonicのDocumentは、Version3の方が見やすいです。[[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic4%E3%81%A7%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9|Ionic4とIonic3の違い]]は多少ありますが、Cardなどは、Ionic3のDocumentの方が分かりやすいです。
+https://ionicframework.com/docs/v3/components/#cards
+{{:ionic4:pasted:20190430-133408.png}}
+https://ionicframework.com/docs/api/card
+{{:ionic4:pasted:20190430-133445.png}}