Created
June 7, 2021 04:08
-
-
Save enappd/910886a7e0b4c3da126170a663060818 to your computer and use it in GitHub Desktop.
Ionic Vue New App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<ion-page> | |
<ion-header :translucent="true"> | |
<ion-toolbar> | |
<ion-title>Home Page</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content :fullscreen="true"> | |
<ion-header collapse="condense"> | |
<ion-toolbar> | |
<ion-title size="large">Home Page</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<div id="container"> | |
<p><strong>Click this button to navigate to another page</strong></p> | |
<ion-button @click="() => {router.push('/page');}">Go back</ion-button> | |
</div> | |
</ion-content> | |
</ion-page> | |
</template> | |
<script lang="ts"> | |
import { | |
IonContent, | |
IonHeader, | |
IonPage, | |
IonTitle, | |
IonToolbar, | |
IonButton | |
} from "@ionic/vue"; | |
import { defineComponent } from "vue"; | |
import { useRouter } from "vue-router"; | |
export default defineComponent({ | |
name: "Home", | |
components: { | |
IonContent, | |
IonHeader, | |
IonPage, | |
IonTitle, | |
IonToolbar, | |
IonButton | |
}, | |
setup() { | |
const router = useRouter(); | |
return { router }; | |
}, | |
}); | |
</script> | |
<style scoped> | |
#container { | |
text-align: center; | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
#container strong { | |
font-size: 20px; | |
line-height: 26px; | |
} | |
#container p { | |
font-size: 16px; | |
line-height: 22px; | |
color: #8c8c8c; | |
margin: 0; | |
} | |
#container a { | |
text-decoration: none; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment