I have a v-menu like below:
<v-menu
fixed
:absolute="false"
:close-on-click="false"
:close-on-content-click="false"
:position-x="10"
:position-y="200"
:value="true"
>
<v-btn text block #click="$vuetify.goTo('#first')">FIRST</v-btn>
<v-btn text block #click="$vuetify.goTo('#second')">SECOND</v-btn>
<v-btn text block #click="$vuetify.goTo('#third')">THIRD</v-btn>
</v-menu>
But when I scroll down, the menu is scrolling and thus can't be used.
How to fix it at given x/y position ?
Note that by default, v-menu components are detached and moved to the root of your application. To fix it , you have to use the attach prop
Add v-menu inside an enclosing div and give it an 'id'. Now you can attach the menu to the id using 'attach'. Refer vuetify docs for attach.
<div id="attachId">
<v-menu
fixed
:absolute="false"
:close-on-click="false"
:close-on-content-click="false"
:position-x="10"
:position-y="200"
:value="true"
attach="#attachId" // See this
>
<v-btn text block #click="$vuetify.goTo('#first')">FIRST</v-btn>
<v-btn text block #click="$vuetify.goTo('#second')">SECOND</v-btn>
<v-btn text block #click="$vuetify.goTo('#third')">THIRD</v-btn>
</v-menu>
Related
I'm fairly new to vuetify and was wondering if the append-icon prop of v-text-field can be dynamic based on the valid state of the field. I need 2 options:
Option 1:
If there is an error it can be the red alert icon. If its valid it can change to a green checkmark.
Option 2: Only show the error icon if there is an error else hide it.
<v-text-field
v-model="firstname"
:rules="nameRules"
class="text-field"
append-icon="mdi-alert-circle-outline"
placeholder="Enter first name"
hide-details="auto"
outlined
required
>
</v-text-field>
Check this codesanbox I made: https://codesandbox.io/s/stack-73601258-dynamic-prepend-icon-uq729h?file=/src/components/Example.vue
Vuetify components have a thing called slots that you can modify to extend it's functionality. You can find the available slots for each vuetify component at their API documentation page:
https://vuetifyjs.com/en/api/v-text-field/#slots
In this example I modified the icon append slot
<v-form v-model="validForm" ref="myForm" lazy-validation>
<v-card class="pa-5">
<v-text-field v-model="text" :rules="textRules" label="My text field">
<template v-slot:append>
<v-icon v-if="validForm && text.length > 0" color="green">
mdi-check
</v-icon>
<v-icon v-if="!validForm" color="red">
mdi-alert-circle-outline
</v-icon>
</template>
</v-text-field>
<v-btn :disabled="!validForm" color="primary" #click="submitForm">
Submit
</v-btn>
</v-card>
</v-form>
The stock app bar component aligns items hard left, and if using the v-spacer component will the push items to the hard right.
I have tried wrapping the button items with v-container inside the v-app-bar but it breaks the layout once other components are added.
Ideally, the button on the left would align with hello and likewise with the buttons on the right, they should align with the right side of the v-container of the body.
I tried wrapping v-app-bar with v-container:
This is essentially the layout I want but obviously not with the background colour pushed in, it should fill out the width like in the first image.
Is there a native way to do this or will I need to get creative?
<template>
<v-container>
<v-app-bar
color="indigo accent-4"
dense
flat
dark
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in items" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</template>
Similar question but no answers. Problem with placing v-app-bar content in container?
Found a workaround in the interim, not sure how clean it is:
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
In case you want the v-app-bar to be fixed to the top of the page, I solved this by wrapping a v-app-bar inside a v-container inside another v-app-bar:
<template>
<v-app-bar app fixed dense color="grey lighten-4" elevation="1">
<v-container>
<v-app-bar dense elevation="0">
<v-app-bar-title nuxt href="/">
My Title
</v-app-bar-title>
</v-app-bar>
</v-container>
</v-app-bar>
</template>
I'm adding like a page header using the v-app-bar inside the v-content and v-container, it looks good but I would like to change the height in order to match the nav drawer on the left. This is what it looks like, as you can see the app bar is shorter than the user info part of the nav drawer. Is there a way to "match" the height?
This is the app-bar code
<v-app-bar absolute fixed color="white" elevate-on-scroll>
<h2 style="color: #6cb2eb">Categories</h2>
<v-spacer></v-spacer>
<v-btn depressed color="primary" dark #click="createItem">New</v-btn>
</v-app-bar>
You can set the height of v-app-bar using the height props. By default, the height is 60. If you set to 80 or something, the issue will be fixed.
<v-app-bar absolute fixed color="white" elevate-on-scroll height="80">
<h2 style="color: #6cb2eb">Categories</h2>
<v-spacer></v-spacer>
<v-btn depressed color="primary" dark #click="createItem">New</v-btn>
</v-app-bar>
I am trying to combine the use of a dialog and a snackbar with VueJS. The problem is the following:
Expected Behaviour:
I should be able to close the snackbar without closing the dialog
What happens now:
The dialog is being closed when the snackbar is clicked
Here is a JSFiddle to reproduce: https://jsfiddle.net/q6m2j4ae/5/
Here is the markup for the problem:
<v-container>
<v-dialog v-model="displayDialog" max-width="300px">
<v-card flat>
This is the dialog content
</v-card>
</v-dialog>
<v-snackbar
v-model="displaySnackbar"
:top="true"
:right="true"
:vertical="true"
color="success"
>
Some Content
<v-btn flat #click.stop="displaySnackbar = false">Close</v-btn>
</v-snackbar>
</v-container>
As you can see, the v-snackbar is at the same level of the dialog. I am not allowed to nest the snackbar into the dialog. But even if I try the snackbar is not even displayed.
What I tried:
I thought that the stop modifier on the click event #click.stop="displaySnackbar = false" would be enough to not close the dialog.
I checked the z-index applied to the elements. The snackbar has a z-index: 1000 and the dialog has a z-index:200. So I'm not able to adjust that value.
Is it a bug? How could I solve the problem on my hand?
A workaround (if the "dismiss on clicking outside the dialog" function is not needed) is to add the property persistent to the dialog.
The click outside the dialog (when clicking the close in the snackbar) is the reason your dialog gets dismissed
For anyone still looking for a good solution: add <div class="v-menu__content--active" style="display:none; z-index:1000;"></div> as a child of your v-snackbar. This tricks v-dialog to think it was not the active component when click outside happened and prevents closing.
I had the same problem. I have produced a solution :
https://codepen.io/alignnc/pen/OdWvJd
<template>
<div id="app">
<v-app id="inspire">
<v-layout row justify-center>
<v-btn
color="primary"
dark
#click.native.stop="dialog = true">
Open Dialog
</v-btn>
<!-- dialog -->
<v-dialog
v-model="dialog"
max-width="290"
:transition="false"
:persistent="snack">
<v-card>
<v-card-text>
Click "agree" to set <br>
this.dialog to false,<br>
and this.snack to true
</v-card-text>
<v-btn
#click.prevent ="snack = true">
Agree
</v-btn>
</v-card>
</v-dialog>
<v-snackbar
v-model='snack'
color='error'
:top='true'>
Hello
<v-btn
color="accent"
flat
#click="snack = false">
Close
</v-btn>
</v-snackbar>
</v-layout>
</v-app>
</div>
</template>
<script>
new Vue({
el: '#app',
data () {
return {
dialog: false,
snack: false
}
}
})
</script>
I'd like to have two floating action buttons in the lower right corner, one above the other (like google maps).
Currently I'm using a fixed style bottom offset to do this on one of the buttons, like so:
<v-btn fab fixed bottom right>...</v-btn>
<v-btn fab fixed bottom right style="bottom: 90px">...</v-btn>
...to achieve this, but I don't want to hardcode the 90px, I'd really rather say "I want two Floating Action Buttons, one vertically above the other".
Is there a vuetify-way to go about this?
You can put them inside another element with a bit of custom CSS for positioning:
<template>
<v-layout column class="fab-container">
<v-btn fab>
<v-icon>add</v-icon>
</v-btn>
<v-btn fab>
<v-icon>remove</v-icon>
</v-btn>
</v-layout>
</template>
<style>
.fab-container {
position: fixed;
bottom: 0;
right: 0;
}
</style>
https://codepen.io/anon/pen/KyJzQP?editors=1100
You can apply a class tag like this:
<template>
<v-card>
<v-card-text style="height: 100px; position: relative">
<v-fab-transition>
<v-btn color="grey" dark absolute top right fab small>
<v-icon>mdi-bookmark-outline</v-icon>
</v-btn>
</v-fab-transition>
<v-spacer />
<v-fab-transition>
<v-btn color="grey" dark absolute top right fab small class="mr-6">
<v-icon>mdi-heart-outline</v-icon>
</v-btn>
</v-fab-transition>
</v-card-text>
</v-card>
</template>