ionic4:ionic-vue
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更] 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:// | ||
+ | |||
+ | {{: | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 322: | 行 334: | ||
{{: | {{: | ||
+ | |||
+ | 画像つきカードCardを作成することができました。 | ||
+ | |||
+ | ===== ion-modalを試してみる ===== | ||
+ | modalという、リンクをクリックすると一時的に出てくる画面を試してみます。 | ||
+ | |||
+ | src/ | ||
+ | src/ | ||
+ | |||
+ | 参考:https:// | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | < | ||
+ | < | ||
+ | <div> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | {{ 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画面を閉じるボタンの実装を行うことができました。 | ||
+ | |||
+ | ===== ソースコードとDEMOサイト ===== | ||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMOサイト | ||
+ | https:// | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
ionic4/ionic-vue.1556631654.txt.gz · 最終更新: 2019/04/30 by adash333