Upgrade to Pro — share decks privately, control downloads, hide ads and more …





April 27, 2019

More Decks by chan_kaku

Other Decks in Technology


  1. β版でもできないこと • The shorthand v-model binding is currently not supported

    a. 双方向バインディングのディレクティブであるv-modelが使えない • Stack navigation for deep transitions is under heavy development at this time. a. 次のページで解説 • ネイティブのAPIが使えない a. これはまだAngularでしか使えない
  2. stack navigator 1 5 4 3 2 1 2 3

    4 5 screenが積み重なっている感じ
  3. ionic追加 import Vue from 'vue' import App from './App.vue' import

    router from './router' import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app') 追加 src/main.js
  4. IonicVueRouterを追加 import Vue from 'vue' import Home from './views/Home.vue' import

    { IonicVueRouter } from '@ionic/vue'; Vue.use(IonicVueRouter); export default new IonicVueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }); 追加 VueRouterを使いつつ、Ionic のRouterAPIを 使うためのもの src/router.js
  5. ion-fab <ion-fab vertical="bottom" horizontal="end"> <ion-fab-button>Share</ion-fab-button> <ion-fab-list side="top"> <ion-fab-button> <ion-icon name="logo-facebook"></ion-icon>

    </ion-fab-button> <ion-fab-button> <ion-icon name="logo-twitter"></ion-icon> </ion-fab-button> <ion-fab-button> <ion-icon name="logo-youtube"></ion-icon> </ion-fab-button> </ion-fab-list> <ion-fab-list side="start"> <ion-fab-button> <ion-icon name="logo-vimeo"></ion-icon> </ion-fab-button> </ion-fab-list> </ion-fab>