ionic4:ionic-vue

差分

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

この比較画面へのリンク

--- ionic4:ionic-vue [2019/04/30] – [vue-routerリンク] 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の変更 =====
+===== src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card) =====
 題名と画像が左寄せになってしまったので、"%%<div text-center></div>%%"で囲んで水平方向真ん中に配置します。
@@ 行 262: / 行 262: @@
 <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}}

ionic4/ionic-vue.txt · 最終更新: 2020/12/03 by adash333