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>
Related
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>
I have a Vuetify which searches a list of users. If there are no results I want to show a second button that allows you to create a new user:
<v-autocomplete
v-model="event.user"
:items="usersData"
label="Seach speaker list"
:search-input.sync="searchUser"
return-object
item-value="id"
item-text="name"
>
</v-autocomplete>
This is the button to show. How to I conditionally allow this if there are no results?
<v-row>
<v-col cols="8">
<v-row>
<v-subheader>
Can’t find who you’re looking for?
</v-subheader>
</v-row>
<v-btn>
<v-icon>
mdi-plus
</v-icon>
Add new speaker
</v-btn>
</v-col>
</v-row>
Try adding v-if directive in v-row. I assume that usersData is an array:
<v-row v-if="usersData.length == 0">
<v-col cols="8">
<v-row>
<v-subheader>
Can’t find who you’re looking for?
</v-subheader>
</v-row>
<v-btn>
<v-icon>
mdi-plus
</v-icon>
Add new speaker
</v-btn>
</v-col>
</v-row>
I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the component, as well?
<template v-slot:item.hours="{ item }">
<v-menu
:nudge-width="200"
:close-on-content-click="false"
offset-x
>
<template v-slot:activator="{ on }">
<v-chip
color="blue"
dark
v-on="on"
>
{{ parseFloat(item.hours).toFixed(1) }}
</v-chip>
</template>
<v-form #submit.prevent="handleSubmitMenu(item)">
<v-card class="px-5">
<v-text-field
label="Edit Hours"
:value="item.hours"
#input="updateHours"
></v-text-field>
<v-card-actions>
<SubmitButton />
</v-card-actions>
</v-card>
</v-form>
</v-menu>
</template>
handleSubmitMenu(timeEntry) {
const hours = this.hours
this.menu = false
},
Just add v-model for each row.
<v-menu v-model="item.menu">
EDIT you also can use $refs just add it to v-menu and call save() to close it.
<v-menu ref="menu" top offset-y :close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Activator
</v-btn>
</template>
<v-btn #click="$refs.menu.save()"></v-btn>
</v-menu>
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>
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>