ionic4:ionic-vue
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
ionic4:ionic-vue [2019/04/30] – [src/router.jsとsrc/App.vueの変更] adash333 | ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card)] adash333 | ||
---|---|---|---|
行 236: | 行 236: | ||
{{: | {{: | ||
- | ===== src/ | + | ===== src/ |
題名と画像が左寄せになってしまったので、" | 題名と画像が左寄せになってしまったので、" | ||
行 262: | 行 262: | ||
< | < | ||
+ | < | ||
+ | <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/ | ||
+ | < | ||
+ | < | ||
+ | <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画面に戻ることができない。。。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
行 324: | 行 471: | ||
今さら聞けない?Vue Router | 今さら聞けない?Vue Router | ||
+ | ===== ionicのcardのリンク ===== | ||
+ | 2019年4月現在、IonicのDocumentは、Version3の方が見やすいです。[[http:// | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
ionic4/ionic-vue.txt · 最終更新: 2020/12/03 by adash333