Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Home.vue (ionic starter)
<template>
<ion-page>
<ion-content :fullscreen="true" scroll-y="false">
<div id="container">
<strong>Ready to create an app?</strong>
<ion-slides pager="true">
<ion-slide>
<ion-card style="border-radius: 25px">
<ion-card-content>
A
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="border-radius: 25px">
<ion-card-content>
B
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
<div>
<ion-button color="primary" shape="round" fill="outline" size="block" >Give Access</ion-button>
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent,IonButton, IonSlides,IonSlide,IonCard,IonCardContent, } from '@ionic/vue';
import { waterSharp } from "ionicons/icons";
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home',
components: {
IonContent,IonButton,
IonSlides,IonSlide,IonCard,IonCardContent,
},
setup() {
return {
waterSharp,
}
}
});
</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