mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
136 lines
5.5 KiB
HTML
136 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Ionic v4 + Vue.js - Ionic Controllers</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="msapplication-tap-highlight" content="no">
|
|
<script src="https://unpkg.com/vue"></script>
|
|
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
|
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
|
|
<script src="https://unpkg.com/vue-property-decorator@latest/lib/vue-property-decorator.umd.js"></script>
|
|
<script src="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
|
|
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css"/>
|
|
</head>
|
|
|
|
<body>
|
|
<ion-app>
|
|
<ion-menu side="end">
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Hola</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content padding>
|
|
hola macho
|
|
</ion-content>
|
|
</ion-menu>
|
|
|
|
<ion-vue-router></ion-vue-router>
|
|
</ion-app>
|
|
|
|
<script>
|
|
const Toolbar = Vue.component('Toolbar', {
|
|
name: 'Toolbar',
|
|
props: { title: String, backURL: String },
|
|
template: `<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button :default-href="backURL"/>
|
|
</ion-buttons>
|
|
<ion-title>{{ title }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>`
|
|
})
|
|
|
|
const Home = {
|
|
template: `<ion-page class="ion-page" main>
|
|
<toolbar title="Home"/>
|
|
<ion-content class="ion-content" padding>
|
|
<ion-button @click="alert">Trigger Alert</ion-button>
|
|
<ion-button @click="loading">Trigger Loading</ion-button>
|
|
<ion-button @click="menu">Toggle Menu</ion-button>
|
|
<ion-button @click="modal">Open Modal</ion-button>
|
|
<ion-button @click="popover">Open Popover</ion-button>
|
|
<ion-button @click="toast">Trigger Toast</ion-button>
|
|
</ion-content>
|
|
</ion-page>`,
|
|
methods: {
|
|
alert() {
|
|
this.$ionic.alertController.create({
|
|
header: 'Hello!',
|
|
message: 'How are you?',
|
|
buttons: ['OK, thanks!'],
|
|
})
|
|
.then(a => a.present())
|
|
},
|
|
loading() {
|
|
this.$ionic.loadingController.create()
|
|
.then(l => {
|
|
l.present()
|
|
setTimeout(function() {
|
|
l.dismiss()
|
|
}, 1000)
|
|
})
|
|
},
|
|
menu() {
|
|
this.$ionic.menuController.toggle()
|
|
},
|
|
modal() {
|
|
this.$ionic.modalController.create({
|
|
component: {
|
|
template: `<div>
|
|
<ion-content padding>
|
|
<h1>Howdy!</h1>
|
|
</ion-content>
|
|
</div>`,
|
|
}
|
|
})
|
|
.then(m => m.present())
|
|
},
|
|
popover(event) {
|
|
this.$ionic.popoverController.create({
|
|
component: {
|
|
template: `<ion-list>
|
|
<ion-list-header>
|
|
<ion-label>Ionic</ion-label>
|
|
</ion-list-header>
|
|
<ion-item>Learn Ionic</ion-item>
|
|
<ion-item>Documentation</ion-item>
|
|
<ion-item>Showcase</ion-item>
|
|
<ion-item>GitHub Repo</ion-item>
|
|
</ion-list>`,
|
|
},
|
|
translucent: true,
|
|
event
|
|
})
|
|
.then(p => p.present())
|
|
},
|
|
toast() {
|
|
this.$ionic.toastController.create({
|
|
message: 'Here\'s to IonicVue!',
|
|
showCloseButton: true,
|
|
position: 'top',
|
|
closeButtonText: 'Done'
|
|
})
|
|
.then(t => t.present())
|
|
},
|
|
}
|
|
}
|
|
|
|
Vue.use(IonicVue.IonicAPI)
|
|
|
|
new Vue({
|
|
router: new IonicVue.IonicVueRouter({
|
|
routes: [
|
|
{ path: '/', component: Home },
|
|
],
|
|
}),
|
|
}).$mount('ion-app')
|
|
</script>
|
|
</body>
|
|
</html>
|