Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quasar Framework Login Form Card Component Example
<template>
<q-page class="bg-light-green window-height window-width row justify-center items-center">
<div class="column">
<div class="row">
<h5 class="text-h5 text-white q-my-md">Company & Co</h5>
</div>
<div class="row">
<q-card square bordered class="q-pa-lg shadow-1">
<q-card-section>
<q-form class="q-gutter-md">
<q-input square filled clearable v-model="email" type="email" label="email" />
<q-input square filled clearable v-model="password" type="password" label="password" />
</q-form>
</q-card-section>
<q-card-actions class="q-px-md">
<q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Login" />
</q-card-actions>
<q-card-section class="text-center q-pa-none">
<p class="text-grey-6">Not reigistered? Created an Account</p>
</q-card-section>
</q-card>
</div>
</div>
</q-page>
</template>
<script>
export default {
name: 'Login',
data () {
return {
email: '',
password: ''
}
}
}
</script>
<style>
.q-card {
width: 360px;
}
</style>
@justinatack

This comment has been minimized.

Copy link
Owner Author

@justinatack justinatack commented Apr 17, 2019

alt text
Requires Quasar Framework v1.0.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment