I am using vuetify 3.0.0.
I would like to have a v-select or v-autocomplete where the dropdown menu is styled as variant="tonal".
For other v-menus, I have achieved this by wrapping the v-menu in a v-card and setting the v-card to variant="tonal". For the v-select, I can only envision to set the list-items to variant="tonal". However, the top and bottom of the list remain in their original color. Also, I cannot find a menu slot in the documenation that I could potentially use to wrap the menu with a v-card.
Any idea on how to best do that?
https://codepen.io/drhouse82/pen/PoaNgEd
<v-autocomplete
color="primary"
:items="itemList"
v-model="selectedValue">
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props" variant="tonal">
</v-list-item>
</template>
</v-autocomplete>
Related
I'm new on vuetify and I'm a little confused by its grid system. I think we have just a v-container tag and after that just a v-row tag. v-col is a direct child of v-row and in v-col we shouldn't have any v-row. right?
Wrong. You can nest v-rows and v-cols. The only difference is that v-col, as you mentioned yourself, must be a direct child of v-row. Otherwise you can nest v-rows inside other v-rows, or inside v-cols, or inside v-container.
Try it yourself here. Just change the v-card inside v-col to v-row with some text and see how it works.
<v-row
:align="align"
no-gutters
style="height: 150px;"
>
<v-col
v-for="n in 3"
:key="n"
>
<v-row no-gutters>Row {{n}}</v-row>
</v-col>
</v-row>
I'd like to use a v-menu component in Vuetify to appear below a text field, but I need to be able to trigger the menu from a method. I can do that with v-model on the menu, but the menu appears at the top left corner of the screen. If I add absolute :position-x="0" :position-y="0" to the v-menu, I can change the position but it's still relative to the entire screen, not the parent div that it's declared in. When I look at the final HTML, it looks like the menu has been put as a child of the v-app container, which explains why it ends up where it does.
Is there some way I can position the menu relative to a page element while still triggering the menu from a method? Or, to put it another way, is it possible to position the menu relative to an element/component that has nothing to do with the menus activation?
<div style="position:relative">
<v-text-field v-model="orgName" label="Organisation Name"></v-text-field>
<v-menu v-model="showMenu">
<v-list>
<v-list-item v-for="(entry, i) in entries" :key="i">
<v-list-item-title>{{ entry }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
In Vuetify components-lib there is a hint that on I can bring my own custom v-list-item with slot:item
// item
// Description
// Define a custom item appearance
// Props
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}
How can I achive that? because when I do
<template v-slot:item="data">
<book :book="data.item"></book>
</template>
Vutifiey warp-up it with own v-list-item and I want to put some custom class on part ot the v-list-items
It is a very common scenario to add some custom styling in the v-auto-complete's list. But, there is no way of avoiding v-list/v-list-item as Vuetify does not give you the full control of the dropdown menu.
As you may have noticed that dropdown menu is like the v-menu and the input element for v-autocomplete is the activator of the dropdown menu. So, this is how the v-autocomplete component works:
Vuetify creates a dropdown menu and add its own logic(HTML, CSS, JS) into it.
it gives users the slots to add custom markup/components inside the v-list-items
That is why there is no way of avoiding the v-list component.
I have attached a pen to help you in better understanding how you can use a custom component inside v-list/v-list-item of v-autocomplete: https://codepen.io/abdullah-shabaz/pen/MWwZNYW
If you are having some problems with styling your book component please tell me. I am sure I can help you with it.
I know this is an old question, I was looking for the same thing so if anybody needs this in the future, the answer is:
<template v-slot:item="{item, on, attrs}">
<v-list-item
v-bind="attrs"
v-on="on"
>
<v-list-item-avatar>
<v-icon v-if="attrs.inputValue">mdi-checkbox-marked</v-icon>
<v-icon v-else>mdi-checkbox-blank-outline</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
While toggling two different activator templates in v-menu
<v-menu offset-y>
<template v-if="mini" v-slot:activator="{ on }">
<v-list-item v-on="on">
<v-list-item-content>
<v-list-item-title>Jane Smith</v-list-item-title>
<v-list-item-subtitle>Logged In</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<template v-else v-slot:activator="{ on }">
<v-btn v-on="on">
Login
</v-btn>
</template>
<v-list>
<v-list-item>Position 1</v-list-item>
<v-list-item>Position 2</v-list-item>
<v-list-item>Position 3</v-list-item>
</v-list>
</v-menu>
we have each of them are disappeared after switching back.
All works only if there is an identical root element in each template.
This is for Vuetify 2.0.3
Example: https://codepen.io/anon/pen/aeyeNv
Try 'Click Me' button to toggle it.
I can't speak to why vuetify doesn't handle a different kind of child element, I haven't had a look into the source.
However if you want it to work with different root elements, you can use the mini variable as the key for the parent element (v-menu) which will re-create the component, so it won't be an issue
<v-menu offset-y :key='mini'>
...
</v-menu>
This is a bit of a hack, but it works and sometimes that's enough...
Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished?
https://codepen.io/anon/pen/qKNNLw
<v-dialog v-model="dialog" persistent max-width="200">
<v-btn slot="activator">Open</v-btn>
<v-card>
<v-card-text>Thank you!</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
Vuejs describes some Javascript callbacks here: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
Is it possible to use them somehow?
My first idea was to set the dialog transition attribute to false and wrap it with a custom transition but this does not seem to work (disabling transition works but adding my own did not), maybe due to the underlying structure generated by Vuetify.
Background: I render a Google map inside the dialog that needs to resize after reaching full size.
This issue is being treated in v1.2.x milestone of Vuetify :
Heres the issue
You may consider recreating the modal wrapping it with the proper vuejs hooks as well.