Tutorials/Quasar_Todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

16.03 Create Tab Panels for Login & Register

Browse Source
This commit is contained in:
Fredrick W Warren 2021-02-12 11:02:57 -08:00
parent a4edd61735
commit 51ae44ed96
1 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/PageAuth.vue
View File

@ -1,13 +1,51 @@
<template>
<p>Auth Page</p>
<q-page padding>
<q-card class="auth-tabs">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab name="login" label="Login" />
<q-tab name="register" label="Register" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="login">
<div class="text-h6">Login</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>
<q-tab-panel name="register">
<div class="text-h6">Register</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>
</q-tab-panels>
</q-card>
</q-page>
</template>
<script>
export default {
name: 'Auth',
data () {
return {
tab: 'login'
}
}
}
</script>
<style>
.auth-tabs {
max-width: 500px;
margin: 0 auto;
}
</style>