Vonic - MdButton & Toast

Material Design Button & $toast service.

HTML

<link rel="stylesheet" href="https://unpkg.com/vonic/dist/ionic/css/ionic.css">
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vonic/dist/vonic.min.js"></script>
<von-app></von-app>

Babel + JSX

const App = {
	template: `
  	<div class="page has-navbar" v-nav="{'title': 'jimmy'}">
      <div class="page-content padding padding-top">
        <md-button class="button button-assertive button-block">
          just a button
        </md-button>

        <md-button class="button button-balanced button-block" @click="onClick()">
          show toast
        </md-button>
      </div>
    </div>
  `,
  
  methods: {
  	onClick() {
    	$toast.show("button clicked.")
    }
  }
}

const routes = {
	'/': {
  	component: App
  }
}

Vue.use(Vonic.app, {
	routes: routes,
  defaultRouterUrl: '/'
})