ユーザ用ツール

サイト用ツール


ionic4:ionic-vue

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionic4:ionic-vue [2019/04/30] – [vue-routerリンク] adash333ionic4:ionic-vue [2020/12/03] (現在) – [Vue.jsでIonic(@ionic/vue)] adash333
行 1: 行 1:
 ====== Vue.jsでIonic(@ionic/vue) ====== ====== Vue.jsでIonic(@ionic/vue) ======
 +
 +→2020年10月 ionic-vueが正式対応したそうです。
 +https://i-doctor.sakura.ne.jp/font/?p=45127
  
 Ionicは、スマホアプリ(PWAを含む)作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。 Ionicは、スマホアプリ(PWAを含む)作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
行 15: 行 18:
  
 上記Blogを写経してみたいと思います。 上記Blogを写経してみたいと思います。
 +
 +===== ソースコードとDEMOサイト =====
 +ソースコード
 +https://github.com/adash333/ionic4-vue-modal
 +
 +DEMOサイト
 +https://compassionate-neumann-66e20f.netlify.com/
 +
 +{{:ionic4:pasted:20190430-144410.png}}
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 236: 行 248:
 {{:ionic4:pasted:20190429-101604.png}} {{: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>%%"で囲んで水平方向真ん中に配置します。 題名と画像が左寄せになってしまったので、"%%<div text-center></div>%%"で囲んで水平方向真ん中に配置します。
行 262: 行 274:
  
 <code> <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> </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}}
 +
  
  

ionic4/ionic-vue.1556631289.txt.gz · 最終更新: 2019/04/30 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki