ユーザ用ツール

サイト用ツール


ionic4:ionic-vue

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionic4:ionic-vue [2019/04/29] – [src/router.jsとsrc/App.vueの変更] adash333ionic4:ionic-vue [2020/12/03] (現在) – [Vue.jsでIonic(@ionic/vue)] adash333
行 1: 行 1:
 ====== Vue.jsでIonic(@ionic/vue) ====== ====== 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にも対応する予定だそうです。
  
 2019年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、<wrap hi><wrap em>v-modelが使用できないそうです。</wrap></wrap>(残念、、、) 2019年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、<wrap hi><wrap em>v-modelが使用できないそうです。</wrap></wrap>(残念、、、)
行 15: 行 18:
  
 上記Blogを写経してみたいと思います。 上記Blogを写経してみたいと思います。
 +
 +===== ソースコードとDEMOサイト =====
 +ソースコード
 +https://github.com/adash333/ionic4-vue-modal
 +
 +DEMOサイト
 +https://compassionate-neumann-66e20f.netlify.com/
 +
 +{{:ionic4:pasted:20190430-144410.png}}
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 106: 行 118:
  
 <code> <code>
-yarn serve+yarn serve  //または、npm run serve
 </code> </code>
  
行 236: 行 248:
 {{:ionic4:pasted:20190429-101604.png}} {{: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 今さら聞けない?Vue Router
  
 +===== ionicのcardのリンク =====
 +2019年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}}
  
  

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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki