<template> <!--HomeView-->
<v-layout>
<v-col class="ma-0 pa-0">
<v-img
class="bg-white"
:aspect-ratio="1"
src="https://images7.alphacoders.com/952/952959.jpg"
cover
></v-img>
</v-col>
<v-col class="ma-0 pa-0 bg-something d-flex align-center justify-center">
<v-card>
<InputComp />
</v-card>
</v-col>
</v-layout>
</template>
Inputcomp
<template>
<v-sheet class="bg-something pa-12" rounded>
<v-card class="mx-auto px-6 py-8 bg-somethingElse">
<v-form v-model="form" #submit.prevent="onSubmit">
<v-text-field
v-model="email"
:readonly="loading"
:rules="[required]"
class="mb-2"
clearable
label="Email"
></v-text-field>
<v-text-field
v-model="password"
:readonly="loading"
:rules="[required]"
clearable
label="Password"
placeholder="Enter your password"
></v-text-field>
<br />
<v-btn
:disabled="!form"
:loading="loading"
block
color="something"
size="large"
type="submit"
variant="elevated"
>
Sign In
</v-btn>
</v-form>
</v-card>
</v-sheet>
</template>
div photo
I add d-flex and my Card element is restricted. I want to both align and center. I tried it with you, can you help me?
Error clears when removing d flex and align-items. When removing align-items, the bottom of the card becomes white. Separated from the Card Grid
Related
i have made a card for sign in and there are no colours on any of the created components. the bottom of card consitst of two button but even those colors are not visible. i have attached the template section of my code. even the blue color of text fields is not visible. what can be the possible error?
<template>
<div>
<v-container>
<v-layout wrap>
<v-row>
<v-col cols="5">
<v-img
src="https://image.freepik.com/free-vector/programmer-working-flat-style_52683-15041.jpg?w=740"
width="500"
height="400"
></v-img>
</v-col>
<v-col cols="7" align-self="end">
<v-flex sm12 md-8 offset-md3>
<v-card elevation="6" width="700">
<v-card-title>
<v-layout align-center justify-space-between>
<h3 class="headline">Sign In</h3>
</v-layout>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<p>Sign in with your username and password:</p>
<v-text-field
autofocus
label="Email"
v-model="email"
type="email"
></v-text-field>
<v-text-field
outline
hide-details
label="Password"
type="password"
v-model="password"
></v-text-field>
</v-card-text>
<br />
<v-divider></v-divider>
<v-container class="px-5" >
<v-checkbox
class="pl-1"
dense
label="Remember Me"
></v-checkbox>
</v-container>
<v-card-actions>
<v-btn class="green--text" color="info" flat to="/forgotdialogue">
Forgot password?
</v-btn>
<v-spacer></v-spacer>
<!-- <landingpage :username="username"></landingpage> -->
<v-btn #click="signUp" color="info">
<v-icon left>mdi-lock</v-icon>
Signup
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-col>
</v-row>
</v-layout>
</v-container>
</div>
</template>
Got it
i just had to change my App.vue file.
in App.vue I included the code in between v-app tags. After this all the colors were restored. Read about it here in this vuetify page https://vuetifyjs.com/en/components/application/
I have a small problem, don't understand how to connect the frontend and backend so email and password are verified from the database. I have programmed this in Vue.js for Login and Register page. And now I need to connect it with API so data is verified from the database and it is hard quite hard for me to understand it because I am learning Vue now.
<template>
<v-app id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="8">
<v-card class="elevation-12">
<v-window v-model="step">
<v-window-item :value="1">
<v-row>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<div>
<section>
<iframe width="600" height="315" src="https://www.youtube.com/embed/ebuUqH4ZVUQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
<h1
class="text-center display-2 teal--text text--accent-3"
>Sign in to Tetris</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-3">
<v-btn rounded color="teal accent-3" dark>SIGN IN</v-btn>
</div>
</v-col>
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Hello, Friend!</h1>
<h5
class="text-center"
>Enter your personal details and start journay with us</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step++">SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
<v-window-item :value="2">
<v-row class="fill-height">
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Welcome Back!</h1>
<h5
class="text-center"
>To Keep connected with us please login with your personnel info</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step--">Sign in</v-btn>
</div>
</v-col>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<h1 class="text-center display-2 teal--text text--accent-3">Create Account</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Name"
name="Name"
prepend-icon="person"
type="text"
color="teal accent-3"
/>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-n5">
<v-btn rounded color="teal accent-3" dark>SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
step: 1
}),
props: {
source: String
}
};
</script>
I think you need to know what is client, server and how they work via the HTTP protocol in the case you mentioned.
Then, search the documentation, you could find the usage code.
I am trying to get all of my links in three columns in my footer with the copyright line below that. However, my copyright line is showing up in a phantom fourth column and it overlaps the third column if the screen width gets too small. If I use the same layout in my content section, I get the three columns.
Here is my footer component:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-row justify="center">
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">Copyright 2020, </p>
</v-col>
</v-row>
</v-footer>
</div>
<template>
On a possibly related note, why do I have to wrap each button in a div with a my-? class to get the buttons to stack vertically.
Edit:
I am using Vuetify v2.2.11.
Here is a screenshot of what it is doing:
Here is what I want:
My buttons that are within the same column are showing up side/side unless I either wrap them in the my-? classed div or there is not enough room in the column to display them side/side. I would like them stacked on top of each other in every screen size. And of course I only want the three columns for my buttons
A v-row only works as expected if wrapped in a v-container.
Add a <v-container fluid> around your v-rows and it should work just fine. Fluid is described as "Removes viewport maximum-width size breakpoints", thus removing the horizontal padding.
The whole thing would look like this in the end:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-container fluid>
<v-row class="text-center">
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">
Copyright 2020,
</p>
</v-col>
</v-row>
</v-container>
</v-footer>
</div>
</template>
Vuetify official example
I have, say copied the layout from the vuetify docs but I am not getting the same layout. I cannot figure out what is blocking me. Is there some default properties that I have to deal with?
Login.vue:
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>Login</v-toolbar-title>
<v-spacer />
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Login"
name="login"
prepend-icon="person"
type="text"
v-model="username"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
v-model="password"
/>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn #click="login" color="primary" >Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
app.vue:
<template>
<v-app id="app">
<v-content>
<v-container fluid>
<router-view />
</v-container>
</v-content>
</v-app>
</template>
<script>
I do not have any custom designed css. I am using vue-cli.
Here is what my layout looks like:
With no error in console.
I would like to center the login, password and login blocks.
I want to center the different blocks but I do not know how to do it at this level.
I tried with v-flex and v-layout but it does not pass.
In the code I tried to center the first and second block with v-layout and v-flex but without satisfactory result.
<template>
<div>
<v-app-bar
color="teal accent-3"
dark
>
<v-spacer></v-spacer>
<v-flex xs="12"><p class="text-justify">Application de traitement des opérations</p></v-flex>
<v-menu
left
bottom
>
<v-list>
<v-list-item
v-for="n in 5"
:key="n"
#click="() => {}"
>
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<div>
<v-card
class="mx-auto"
height="100"
max-width="200"
outlined
color="orange lighten-2"
></v-card>
<v-card
class="mt-n12 mx-auto"
elevation="12"
height="400"
max-width="600"
>
<V-layout>
<v-flex xs="12">
<div class="text-xs-center">
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Solo"
placeholder="Login"
solo
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Solo"
placeholder="Mot de passe"
solo
></v-text-field>
</v-col>
</div>
<el-button type="primary" #click="dialogVisible = true" >Connexion</el-button>
<el-dialog
title="Verification de Connexion"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>Connexion reussi</span>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Annuler la connexion</el-button>
<el-button type="primary" #click="dialogVisible = false">Continuer</el-button>
</span>
</el-dialog>
</v-flex >
</V-layout>
</v-card>
</div>
</div>
</template>
There's a lot of ways to do this. You could use flex with display row, but it sounded like you tried that? If so you can also try setting these to display: block, and setting margin: auto.