I have a login form in a card, i put a background image on it using the img prop, but I want to add opacity to it, I guess I will have to use some vanilla CSS on this but I don't really know how to approach it, when I inspect the element it adds the image as an inline style instead of using some <img> tag. Is there a way I could add opacity using the v-img component or do I have to do everything with vanilla CSS?
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
show: false,
}
},
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row no-gutters>
<v-col cols="12" sm="12">
<v-card class="rounded-0 mx-auto" flat max-width="480" img="https://i.picsum.photos/id/845/200/200.jpg?hmac=KMGSD70gM0xozvpzPM3kHIwwA2TRlVQ6d2dLW_b1vDQ">
<!-- Login form -->
<v-form>
<v-container>
<v-row no-gutters>
<v-col cols="12" sm="12">
<v-text-field label="Username/Email" color="brown lighten-1" placeholder="Username/Email" outlined></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field placeholder="Password" outlined color="brown lighten-1" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" :type="show ? 'text' : 'password'" label="Password" #click:append="show = !show"></v-text-field>
</v-col>
<v-btn block class="rounded-0 white--text" color="#887783">Login</v-btn>
</v-row>
</v-container>
</v-form>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Related
I would like to change the background color of the selected row in a v-data-table.
<v-data-table dense :headers="headers"
:items="records"
#click:row="handleClick"> <!-- handleClick is a function that logs item for the moment... -->
<template v-slot:[`item.index`]="{item}">
<v-row justify="center">
<v-col>
<div>{{item.index}}</div>
</v-col>
</v-row>
</template>
<template v-slot:[`item.status`]="{ item }">
<v-row justify="center">
<v-col v-if="item.status===1">
<v-icon color="green">
mdi-check-circle
</v-icon>
</v-col>
<v-col v-else>
<v-icon color="orange">
mdi-progress-check
</v-icon>
</v-col>
</v-row>
</template>
</v-data-table>
I couldn't find a way to distinguish the selected row from the others and thus update the style for the selected one.
Basically i'd like to reproduce the behavior implemented for the v-list component.
Selected rows have the v-data-table__selected class applied on their TR tag - so you can just create some CSS override to target them. The default style in Vuetify is
.theme--light.v-data-table tbody tr.v-data-table__selected
{
background: #f5f5f5;
}
You can use item-key="index" and single-select to select row and set class tr.v-data-table__selected:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{text: 'index', value: 'index'}, {text: 'status', value: 'status'}],
records: [{index: 1, status: 1}, {index: 2, status: 0}, {index: 3, status: 1}],
selected: null
}
},
methods: {
handleClick(item, row) {
row.select(true);
this.selected = item
}
}
})
tr.v-data-table__selected {
background: lime !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<div>{{ selected }}</div>
<v-data-table dense :headers="headers"
:items="records" item-key="index" single-select
#click:row="handleClick">
<template v-slot:[`item.index`]="{item}">
<v-row justify="center">
<v-col>
<div>{{item.index}}</div>
</v-col>
</v-row>
</template>
<template v-slot:[`item.status`]="{ item }">
<v-row justify="center">
<v-col v-if="item.status===1">
<v-icon color="green">
mdi-check-circle
</v-icon>
</v-col>
<v-col v-else>
<v-icon color="orange">
mdi-progress-check
</v-icon>
</v-col>
</v-row>
</template>
</v-data-table>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I'm trying to center my auth component (v-card) horizontally and vertically. I tried all kinds of solutions like justify=center and align=center on the rows, fill-height on the v-container, class="fill-height" on the v-container but its not working. What am I doing wrong here ?
Code :
<script setup lang="ts">
import { useUserStore } from "../../stores/user";
const store = useUserStore();
</script>
<template>
<v-card width="800" >
<v-card-title>
Authentication
</v-card-title>
<v-card-subtitle>
login with username and password
</v-card-subtitle>
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="store.username" label="Username"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="store.password" label="Password"></v-text-field>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script setup lang="ts">
import Auth from "../components/auth/Auth.component.vue"
</script>
<template>
<v-container>
<v-row style="border:1px solid red;" fill-height>
<v-col class="d-flex justify-center items-center">
<Auth/>
</v-col>
</v-row>
</v-container>
</template>
<template>
<v-app>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
<script setup lang="ts">
</script>
Update
Check this codesanbox I made: https://codesandbox.io/s/stack71483246-center-login-p1u6zv?file=/src/views/Home.vue
Looks like by just adding the class fill-height to the root container you can center it vertically.
<template>
<v-container fluid class="fill-height">
<v-row style="border:1px solid red;">
<v-col class="d-flex justify-center">
<Auth/>
</v-col>
</v-row>
</v-container>
</template>
The following snippet will center the card vertically in the parent in Vuetify 3:
<v-row align="center" class="fill-height">
<v-col>
<v-card class="ma-3">
...
</v-card>
</v-col>
<v-row>
I am using this code on my project, it's a text-field that when I click on it pops a dialog which shows a calendar.
This works fine, however when I insert the range prop on the v-date-picker, the calendar doesn't show up anymore, only the dialog background. It is working fine on this codepen you can see below:
See the Pen
Vuetify Example Pen by Simão (#izzyDL)
on CodePen.
<div id="app">
<v-app id="inspire">
<v-row>
<v-col
cols="11"
sm="5"
>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
scrollable
range
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
#click="modal = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
#click="$refs.dialog.save(date)"
>
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>
Any ideas on what might be causing this issue ?
The snippet below is using your code and the picker shows up just fine. Am I missing something in your question?
One thing I should point out is that when using range prop date picker expects its model to be an array of length 2 or empty. In your code, the date prop is a string. It doesn't affect the calendar rendering though.
Screenshot
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: ['2019-09-10', '2019-09-20'],
menu: false,
modal: false,
}),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="11" sm="5">
<v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable range>
<v-spacer></v-spacer>
<v-btn text color="primary" #click="modal = false">
Cancel
</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I'm new to Vue and Vuetify and I'm trying to build a login screen. I can't get v-img to center inside of v-flex. I've tried a lot of things, but am really stuck. I'm referring to the Vue logo in the right v-flex.
I can't get the snippet to show exactly as the image above, but I don't think it really matters as the Vue logo isn't centered either in the snippet. If there is a better way to create the setup as shown in the image I would really like to know. As I said, i'm new to this and still learning.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
showPassword:false
}),
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.2/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
<v-app style="
background-color: #011c40;
background-image: linear-gradient(180deg, #011c40 50%, rgb(26, 65, 115) 100%);
background-size: cover;
">
<v-main>
<v-container class="fill-height"
fluid>
<v-row>
<v-col cols="12">
<v-row
justify="center"
>
<v-card tile>
<v-layout align-center>
<v-flex xs6 class="hidden-sm-and-down">
<v-img src="http://www.dpereira.nl/Er/img/banner.png" width="500px"></v-img>
</v-flex>
<v-flex class="pa-10 pb-8 text-center">
<v-img class="" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" width="100px"></v-img>
<v-card-text class="pb-0">
<v-form>
<v-text-field
label="Gebruikersnaam"/>
<v-text-field
:type="showPassword ? 'text' : 'password'"
label="Wachtwoord"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-checkbox dense label="Onthoud mij"></v-checkbox>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn height="50px" tile ripple depressed block color="secondary">Inloggen</v-btn>
</v-card-actions>
<v-divider></v-divider>
<div class="pt-3">
<div class="d-block caption text-center">Wachtwoord vergeten?</div>
<div class="d-block caption text-center">Nog geen account? Meld u hier aan.</div>
</div>
</v-flex>
</v-layout>
</v-card>
</v-row>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
EDIT: I have added mx-auto class on v-img, now it's working as intended.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
showPassword:false
}),
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.2/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
<v-app style="
background-color: #011c40;
background-image: linear-gradient(180deg, #011c40 50%, rgb(26, 65, 115) 100%);
background-size: cover;
">
<v-main>
<v-container class="fill-height"
fluid>
<v-row>
<v-col cols="12">
<v-row
justify="center"
>
<v-card tile>
<v-layout align-center>
<v-flex xs6 class="hidden-sm-and-down">
<v-img src="http://www.dpereira.nl/Er/img/banner.png" width="500px"></v-img>
</v-flex>
<v-flex class="pa-10 pb-8 text-center">
<v-img class="mx-auto" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" width="100px"></v-img>
<v-card-text class="pb-0">
<v-form>
<v-text-field
label="Gebruikersnaam"/>
<v-text-field
:type="showPassword ? 'text' : 'password'"
label="Wachtwoord"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-checkbox dense label="Onthoud mij"></v-checkbox>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn height="50px" tile ripple depressed block color="secondary">Inloggen</v-btn>
</v-card-actions>
<v-divider></v-divider>
<div class="pt-3">
<div class="d-block caption text-center">Wachtwoord vergeten?</div>
<div class="d-block caption text-center">Nog geen account? Meld u hier aan.</div>
</div>
</v-flex>
</v-layout>
</v-card>
</v-row>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
You could also use flex box to center the content (adjusting the container height for vertical alignment)
<v-container fluid>
<v-layout justify-center align-center>
<v-flex shrink>
<div>your content</div>
</v-flex>
</v-layout>
</v-container>
Would anyone know how to fix label positioning for Vuetify outlined text fields. Here's a simple example. On focus, the label doesn't position themselves correctly.
<div id="js-nomination-form">
<v-form v-model="valid">
<v-row>
<v-col cols="6">
<v-text-field
outlined
v-model="companyname"
label="Company name"
></v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
v-model="companyaddress"
label="Address"
outlined
></v-text-field>
</v-col>
</v-row>
</v-form>
</div>
new Vue({
el: '#js-nomination-form',
vuetify: new Vuetify(),
data: () => ({
valid: false,
companyname: '',
companyaddress: '',
}),
methods: {
submit () {
},
clear () {
}
}
})
https://codepen.io/mkrisch76/pen/YzPbrpy
Wrap v-form with v-app like this:
<div id="js-nomination-form">
<v-app>
<v-form v-model="valid">
<v-row>
<v-col cols="6">
<v-text-field
outlined
v-model="companyname"
label="Company name"
></v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
v-model="companyaddress"
label="Address"
outlined
></v-text-field>
</v-col>
</v-row>
</v-form>
</v-app>
</div>
But it's easy solution, just to see changes in your CodePen example.
It's better to use v-app in your main template (usually App.vue) like this:
<!-- App.vue -->
<template>
<v-app id="app">
<router-view/>
</v-app>
</template>
...
v-app should only be used within your application ONCE.
Read more about v-app