This is a form for logging in. As noted in the black screen, the registration button is small. The question is how can I make the registration button as large as in the white image
This is part of the code for the record button
Register.vue:
<v-layout row>
<v-flex xs12>
<v-btn class="red accent-4 margine color myfont">
Sign up
</v-btn>
</v-flex>
</v-layout>
If you check the Vuetify documentation, you'll find, that in order for the button to extend the full width of its container, you give it the block property.
Like such:
<v-btn class="red accent-4 margine color myfont" block>
Sign up
</v-btn>
You'll find it all in the vuetify documentation
Related
I have two icons, how can I make a space between them?
two Icons in App.vue:
<v-btn icon class="grey lighten-4">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
It's recommended to use built-in class name like mx-2 to add some margin around the buttons after wrapping them by a div:
<div >
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</div>
LIVE DEMO
according to vuetify v-icon api.
we need to use left or right .
left: Applies appropriate margins to the icon inside of a button when placed to the left of another element or text.
right: Applies appropriate margins to the icon inside of a button when placed to the right of another element or text
So i have been attempting to create a V-Card in vuetify with a specific layout. The top part of the card will vary in size and therefore I need to be able to align the bottom part of the card to the bottom.
So i've tried to do the following code here which should allow the first part to "grow" to fill the height and then the second part to "shrink" and stay at the bottom...
However, no success.. I probably just have done something sligthly wrong here but I'm pulling out my hair...
Here is my code:
<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
<v-flex grow>
{{ skinName }}
<v-img :src="skinImage" />
</v-flex>
<v-flex shrink>
<v-chip
class="ma-2"
color="indigo"
text-color="white"
>
<img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
</v-chip>
</v-flex>
</v-layout>
</v-container>
As you can see from my image, the blue "coins" should all align at the bottom in the same place no matter how big the text is above it!
Let me know if you need any more information.
Your container is not filling the height of the card, so there is no 'empty space' for the flexbox to redistribute. You can use the fill-height attribute on both the layout and the container element to make sure it stretches.
This should be a simple fix but not sure where to start.
I have..
<template>
<div class="mx-5 mb-5 Weapons">
<h1 class="green--text">Weapons</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 s6 m4 lg3 v-for="weapon in assaultrifles" :key="weapon.weapontype">
<v-card class="text-md-center ma-3 black">
<v-responsive class="pt-4">
<v-img contain :src="weapon.images"></v-img>
</v-responsive>
<v-card-title class="justify-center">
<div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat class="green black--text ma-3">View Weapons</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I then have data in arrays with images and "titles" for these cards. I have about 8 cards , each representing its own "category" which is represented by the "title" data in my array.
What I am trying to do is make it so if I click on a card with the category/title "Handgun" or click on a card "rifle", I will be routed to a new page where I list out items for that specific category.. however I am not sure where to start because I am simply passing {{weapon.WeaponType}} into 1 card object, and then using 1 button ( with the text "view weapon"), across all the cards.
My understanding is that if I make a route for the 1 button I made, then the route will be the same for all buttons, despite the cards representing its own category, which would be bad because I don't want to see "handguns" when I click on the "shotgun" card’s button.
I want to somehow keep my current structure ( using 1 object and passing a loop of data ) and 1 btn, so that my code stays around the same length/structure).
Thanks for reading.
You will need additional property in your objects - for the route of the button:
<v-btn
flat
class="green black--text ma-3"
:to="weapon.route"
>
View Weapons
</v-btn>
The weapon.route can be a string or an object.
Another option is to provide just the category IDs and then
<v-btn
flat
class="green black--text ma-3"
:to="{name: 'weaponItems', params: {categoryID: weapon.categoryID}}"
>
View Weapons
</v-btn>
I have 4 cards (3 in the first row, 1 in second). Every time I resize my browser window my v-card-actions contents do not react. In pictures, this is when everything is ok:
And this is when I resize my browser window:
And finally here's my code:
.vue
<v-container
grid-list-lg
>
<v-layout
row
wrap
>
<v-flex
v-for="teacher in teachers"
:key="teacher.firstName"
md-4
xs4
>
<v-card
flat
tile
>
<v-img
:src='teacher.src'"
height="260px"
></v-img>
<v-card-title
primary-title
class='blue--text'
>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br>
M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn
flat
small
color='indigo darken-4'
>
More
</v-btn>
<v-spacer></v-spacer>
<v-btn
flat
small
color='indigo darken-4'
>
Schedule an Appointment
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<script>
data() {
return {
teachers:[
{firstName:'Jon', lastName:'Doe', specialty:'PE', ms:' University of Georgia',
msc:'University of Georgia', src:'https://source.unsplash.com/kmuch3JGPUM'},
{firstName:'Maria', lastName:'Doe', specialty:'Philology', ms:'University of Atlanta',
msc:'University of Atlanta ', src:'https://randomuser.me/api/portraits/women/3.jpg'},
{firstName:'Jon', lastName:'Jon', specialty:'Mathematics', ms:'University of Michigan',
msc:'University of Michigan', src:'https://source.unsplash.com/Jy4ELSGPHTc'},
{firstName:'Peter', lastName:'Xavier', specialty:'Mathematics',
ms:'University of Miami', msc:'University of Miami',
src:'https://randomuser.me/api/portraits/men/71.jpg'},
{firstName:'Peter', lastName:'Miros', specialty:'Mathematics', ms:'University of Miami',
msc:'Georgetown University', src:'https://randomuser.me/api/portraits/men/20.jpg'},
}
]
}
The <v-card-actions> element does react to browser width changes.
What you are seeing is an issue with the Vuetify <v-button> element as it does not (by default) wrap text to fit.
You have a few options:
Add custom CSS for your buttons to accommodate - tricky and a bit too much hacking for my liking.
Make your own button element just for this - seems overkill, but I've done this when I also want a button to stand out or look different enough to Vuetify's standard.
Modify your button text to be shorter - Try one word like "Booking" or "Appointments", and even modify the text (or change to an icon) depending on screen size if you want to get fancy.
Personally, I'd recommend option 3.
EDIT: Added xs12 sm6 md4 sizing and some minor formatting changes to highlight different elements
<v-container grid-list-lg>
<v-layout row wrap>
<v-flex v-for="teacher in teachers" :key="teacher.firstName" xs12 sm6 md4>
<v-card>
<v-img :src="teacher.src" height="260px "></v-img>
<v-card-title primary-title class='blue--text'>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br> M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn outline color='blue'>
More...
</v-btn>
<v-spacer></v-spacer>
<v-btn outline color='green'>
Appointments
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
I have tested this and there is no size below 300px (minimum for v-card) where the buttons don't look fine.
Made a codepen for you too.
I am using Vuetify and VueJS (the latest versions).
Here is the small template of Login.vue:
<template>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="success">
<v-toolbar-title>Login form</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form #submit.prevent="checkLogin">
<v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="my#login.com"></v-text-field>
<v-text-field prepend-icon="lock" id="userPassword" v-model="userPassword" placeholder="password" type="password"></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- TODO fix the bug when form.submit not works -->
<v-btn type="submit" color="success">Login</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</template>
So, if you see, there is an #submit.prevent on v-form with checkLogin call and it is not working while clicking the submit buttor nor hitting the enter button while in input. Using #submit without prevent also has no effect.
But! If I put event handler on the v-btn like this:
<v-btn #click.native="checkLogin">
after clicking the button (not hitting the enter in input fields) all works as expected.
So, can you please tell me, what am I doing wrong with the v-form submition event handling?
Thank you!
Your submit button isn't inside the form so it's not triggering a submit event.
Either re-structure your markup or try setting an id on the form and use the form attribute on the button, eg
<v-form #submit.prevent="checkLogin" id="check-login-form">
and
<v-btn type="submit" color="success" form="check-login-form">Login</v-btn>
Note: The form attribute does not work for any version of Internet Explorer.