ionic4:ionic-vue
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card)] adash333 | ionic4:ionic-vue [2020/12/03] (現在) – [Vue.jsでIonic(@ionic/vue)] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Vue.jsでIonic(@ionic/ | ====== Vue.jsでIonic(@ionic/ | ||
+ | |||
+ | →2020年10月 ionic-vueが正式対応したそうです。 | ||
+ | https:// | ||
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:// | ||
+ | |||
+ | DEMOサイト | ||
+ | https:// | ||
+ | |||
+ | {{: | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 408: | 行 420: | ||
Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。 | Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。 | ||
+ | ==== Modal画面を閉じるボタンの実装($ionic.modalController.dismiss()) ==== | ||
+ | Modal画面を閉じるボタンを設置する場合は、Modal.vueの< | ||
+ | |||
+ | src/ | ||
+ | < | ||
+ | // < | ||
+ | <div text-center> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | // < | ||
+ | methods: { | ||
+ | closeModal() { | ||
+ | return this.$ionic.modalController.dismiss(); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、Modal画面の作成と、Modal画面を閉じるボタンの実装を行うことができました。 | ||
+ | |||
+ | ===== ソースコードとDEMOサイト ===== | ||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMOサイト | ||
+ | https:// | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
ionic4/ionic-vue.1556633534.txt.gz · 最終更新: 2019/04/30 by adash333