ionic4:ionic-vue
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
ionic4:ionic-vue [2019/04/29] – [Vue.jsでIonic(@ionic/vue)] adash333 | ionic4:ionic-vue [2019/04/30] – [ion-modalを試してみる] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Vue.jsでIonic(@ionic/ | ====== Vue.jsでIonic(@ionic/ | ||
- | Ionicは、スマホアプリ(PWAを含む)作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Inoic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。 | + | Ionicは、スマホアプリ(PWAを含む)作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。 |
2019年4月現在、@ionic/ | 2019年4月現在、@ionic/ | ||
行 106: | 行 106: | ||
< | < | ||
- | yarn serve | + | yarn serve // |
</ | </ | ||
行 236: | 行 236: | ||
{{: | {{: | ||
- | src/ | + | ===== src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card) ===== |
+ | |||
+ | 題名と画像が左寄せになってしまったので、" | ||
+ | |||
+ | src/ | ||
+ | |||
+ | < | ||
+ | <div text-center> | ||
+ | < | ||
+ | <img alt=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Aboutページでは、Ionicのcardを使ってみたいと思います。 | ||
+ | |||
+ | 参考:https:// | ||
+ | |||
+ | 参考2:https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | src/ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <div text-center> | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <img alt=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | Keep close to Nature' | ||
+ | and climb a mountain or spend a week in the woods. Wash your spirit clean. | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | name: " | ||
+ | }; | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 画像つきカードCardを作成することができました。 | ||
+ | |||
+ | ===== ion-modalを試してみる ===== | ||
+ | modalという、リンクをクリックすると一時的に出てくる画面を試してみます。 | ||
+ | |||
+ | src/ | ||
+ | src/ | ||
+ | |||
+ | 参考:https:// | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | {{ content }} | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | export default { | ||
+ | name: ' | ||
+ | props: { | ||
+ | title: { type: String, default: 'Super Modal' }, | ||
+ | }, | ||
+ | data() { | ||
+ | return { | ||
+ | content: ' | ||
+ | } | ||
+ | }, | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | < | ||
+ | // < | ||
+ | <div text-center> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | // < | ||
+ | < | ||
+ | import Modal from ' | ||
+ | |||
+ | export default { | ||
+ | name: " | ||
+ | methods: { | ||
+ | openModal() { | ||
+ | return this.$ionic.modalController | ||
+ | .create({ | ||
+ | component: Modal, | ||
+ | componentProps: | ||
+ | data: { | ||
+ | content: 'New Content', | ||
+ | }, | ||
+ | propsData: { | ||
+ | title: 'New title', | ||
+ | }, | ||
+ | }, | ||
+ | }) | ||
+ | .then(m => m.present()) | ||
+ | }, | ||
+ | }, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。 | ||
+ | |||
+ | ==== Modal画面を閉じるボタンの実装($ionic.modalController.dismiss()) ==== | ||
+ | Modal画面を閉じるボタンを設置する場合は、Modal.vueの< | ||
+ | |||
+ | src/ | ||
+ | < | ||
+ | // < | ||
+ | <div text-center> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | // < | ||
+ | methods: { | ||
+ | closeModal() { | ||
+ | return this.$ionic.modalController.dismiss(); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、Modal画面の作成と、Modal画面を閉じるボタンの実装を行うことができました。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
行 297: | 行 496: | ||
今さら聞けない?Vue Router | 今さら聞けない?Vue Router | ||
+ | ===== ionicのcardのリンク ===== | ||
+ | 2019年4月現在、IonicのDocumentは、Version3の方が見やすいです。[[http:// | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
ionic4/ionic-vue.txt · 最終更新: 2020/12/03 by adash333