Vue cli version # 5.0.6 | Vuetify version: vuetify#2.6.7
I've used vuejs+vuetify for a little bit now and my mind is just bugging out, I'm sure all vuejs/vuetify contents aren't set to centered by default. I have created a new project and I haven't touched any formatting or theming configurations.
Here is my code for a simple login page:
<template>
<div>
<v-icon
x-large
style="font-size: 125px"
> mdi-account </v-icon>
<!-- login form card -->
<v-card max-width="525px">
<v-container>
<v-form ref="login">
<v-card-title>
<h1> Login </h1>
</v-card-title>
<v-text-field
label="Email"
outlined
/>
<v-text-field
label="Passwrd"
outlined
/>
<v-spacer></v-spacer>
<v-btn> Login </v-btn>
</v-form>
</v-container>
</v-card>
</div>
</template>
<script>
export default {
//
}
</script>
<style>
</style>
The icon is centered already in the page without setting any styling, and whenever I change the size of my card it resizes but shifts to the left side of the page.
Instead of writing <div>. You should write:
<v-row justify="center"></v-row>
Related
I am utilizing a v-navigation-drawer with the expand-on-hover prop. When it is in its mini variant, I would like to hide the textbox and button at the bottom. The navigation drawer has computed properties, one of which is isMiniVariant. Set to true when collapsed and false when expanded. How can I use this property to bind a style to the div that contains the items I would like to hide?
The codepen/code can be seen below:
https://codepen.io/emicion/pen/zYqerGo?editors=1000
<div id="app">
<v-app id="inspire">
<v-navigation-drawer permanent left app expand-on-hover dark>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-message</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="title">Application</v-list-item-title>
<v-list-item-subtitle>subtext</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<template v-slot:append>
<!-- I want to hide all of this below -->
<div class="pa-2">
<v-textarea no-resize outlined placeholder="Enter comment here..." rows="2"></v-textarea>
<v-btn dark outlined small>
<span>Add Comment</span>
</v-btn>
</div>
</template>
</v-navigation-drawer>
</v-app>
</div>
Computed properties listed on VNavigationDrawer
One way is:
add to style
.v-navigation-drawer--mini-variant .hideme {
display:none;
}
add class to the div you want to hide
<div class="pa-2 hideme">
Actually, the better way is to add v-list-group--sub-group to the class of the div
<div class="pa-2 v-list-group--sub-group">
Both are kind of hacky, but I've tried using v-list-group's directly, but it's not easy
I am attempting to set up a responsive Vuetify app bar in a Vue.js project. The navigation links are rendered in a 3-dot drop down menu when viewed on a mobile screen.
<v-app>
<v-app-bar color="indigo" dark fixed app>
<v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text to="create">
<span class="mr-2" v-if="activeUser">Create Post</span>
</v-btn>
<v-btn text to="/">
<span class="mr-2" v-if="activeUser">All Posts</span>
</v-btn>
</v-toolbar-items>
<v-menu class="hidden-md-and-up">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="activeUser" to="create">
<v-list-item-title>Create Post</v-list-item-title>
</v-list-item>
<v-list-item v-if="activeUser" to="/">
<v-list-item-title>All Posts</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
The problem is that the 3-dot button renders in both full screen and mobile. I of course want that button to by visible only in mobile. To fix this, I attempted to nest the button inside the v-toolbar-items tags, but that also did not work. Any recommendations on how to configure this app bar to display the 3-dots button only in mobile view? Thanks!
I usually make myself a little helper function
computed: {
isMobile() {
return this.$vuetify.breakpoint.xsOnly;
}
}
The different available breakpoints are listed here.
Then you can use it in your template like
<v-menu v-if="isMobile">
</v-menu>
Alternatively, you can just use the $vuetify directly in your markup.
<v-menu v-if="$vuetify.breakpoint.xsOnly">
</v-menu>
Am trying to add a solo textfield in a toolbar but this fails
so i have
<v-toolbar dense flat dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field
light
solo
placeholder="Search an item here"
></v-text-field>
<v-spacer></v-spacer>
<v-divider inset
vertical
></v-divider>
<v-btn text class="text-none">
Action Menu
</v-btn>
</v-toolbar>
The above produces
which i would like centered vertically on the toolbar (like the title)
I have also tried adding a margin to the solo text field but still it doesnt center it on the toolbar.
I have made a Codepen link for the above isse
What do i need to add to it to make it center
You have to have hide-details on your v-text-field and also height of dense-ed toolbar is to small for v-text-field inside (except you use css to customize v-text-field height).
Here is simple example:
<div id="app">
<v-app>
<v-content>
<v-container style="margin-top:40px">
<v-toolbar flat dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field hide-details solo single-line class="ml-5" light></v-text-field>
<v-spacer></v-spacer>
<v-divider inset
vertical
></v-divider>
<v-btn text class="text-none">
Action Menu
</v-btn>
</v-toolbar>
</v-container>
</v-content>
</v-app>
</div>
Using vuetify, how can I make two UI components show up on one singular page? I have tried combining elements within one bracket and got error messages. When stacking components in separate only thee bottom template appears in the front end. Is there a way two stack UI components using vue-router?
edit: my goal is to place two ui components such as photo grid and carousel from vuetify on top each other to create a print out similar to this screenshot mash-up.
This is the code that produces my current localhost printout code sample of stacking templates and the localhost printout.
<template>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<v-flex
v-for="n in 9"
:key="n"
xs4
d-flex
>
<v-card flat tile class="d-flex">
<v-img
:src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
aspect-ratio="1"
class="grey lighten-2"
>
<v-layout
slot="placeholder"
fill-height
align-center
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-layout>
</v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</v-layout>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
></v-carousel-item>
</v-carousel>
</template>
Your problem is you have two template tags, if you move the content of the bottom template tag into the first one it should work. It should look something like this:
<template>
<div>
<v-layout>
v-card etc...
</v-layout>
<v-carousel>
v-carousel-item etc...
</v-carousel>
</div>
</template>
<script>
javscript code...
</script>
As #sumurai8 said, you should only have one top level template tag.
In v-card-actions component of v-card, I want to place one button on the left and the other on the right using mr-0 (margin-right= 0), but the 2 buttons always stay close to each other.
What I tried:
Prop left and right for the buttons
v-spacer component between the buttons
Code:
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Ttile</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>
</div>
</v-card-title>
<v-card-actions>
<v-btn left>Share</v-btn>
<v-spacer />
<v-btn right>Explore</v-btn>
</v-card-actions>
</v-card>
Codepen.
How to solve this?
Your code is correct. Just use this:
<v-card-actions>
<v-btn>Share</v-btn>
<v-spacer></v-spacer>
<v-btn>Explore</v-btn>
</v-card-actions>
So just change the v-spacer to not be self-enclosing tag.
Just wrap them in v-flex and add text-xs-right class to the second, to pull to the right the second button.
<v-card-actions>
<v-flex>
<v-btn>Share</v-btn>
</v-flex>
<v-flex class="text-xs-right">
<v-btn>Explore</v-btn>
</v-flex>
</v-card-actions>
CodePen
Edit Vuetify 2.1.0 (thanks to #J. Unkrass) :
Just wrap them in v-col and add text-right class to the second, to pull to the right the second button.
<v-card-actions>
<v-col>
<v-btn>Share</v-btn>
</v-col>
<v-col class="text-right">
<v-btn>Explore</v-btn>
</v-col>
</v-card-actions>