差分

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

--- ionic4:ionic-vue [2019/04/30] – [vue-routerと、@ionic/vueの追加] adash333
+++ ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更] adash333
@@ 行 236: / 行 236: @@
 {{:ionic4:pasted:20190429-101604.png}}
+===== src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card) =====
-題名と画像を"%%<div text-center></div>%%"で囲む。
+題名と画像が左寄せになってしまったので、"%%<div text-center></div>%%"で囲んで水平方向真ん中に配置します。
-src/Home.vueの変更
+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}}
@@ 行 300: / 行 382: @@
 今さら聞けない？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}}