Skip to content

Instantly share code, notes, and snippets.

@argelius

argelius/onsen-vue.html

Last active May 11, 2020 01:24
Show Gist options
  • Save argelius/49b3198deee35620c9ef to your computer and use it in GitHub Desktop.
Save argelius/49b3198deee35620c9ef to your computer and use it in GitHub Desktop.
Download ZIP
Onsen UI 2.0 with Vue.js
Raw
onsen-vue.html
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,500,400italic,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.6/css/onsenui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.6/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.6/js/onsenui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.15/vue.min.js"></script>
<style>
.dialog-button {
position: absolute;
left: 50%;
transform: translateX(-50%) !important;
top: 30px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
Vue.component('my-dialog', {
template: `
<ons-dialog modifier="material">
<ons-button
class="dialog-button"
modifier="material"
@click="hide()">
Hide
</ons-button>
</ons-dialog>
`,
methods: {
show: function() {
return this.$el.show();
},
hide: function() {
return this.$el.hide();
}
},
events: {
'show-dialog': function() {
return this.show();
}
}
});
var vm = new Vue({
el: '#app',
template: `
<ons-page modifier="material">
<ons-toolbar modifier="material">
<div class="center">Vue.js sample</div>
</ons-toolbar>
<p style="text-align: center;">
<ons-button
modifier="material"
@click="showDialog()">Click me!</ons-button>
</p>
</ons-page>
<my-dialog></my-dialog>
`,
methods: {
showDialog: function() {
this.$broadcast('show-dialog');
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment