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.
Related
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>
To make the hover effect of a v-btn node in vuetify more visible I use the following code:
<v-hover v-slot:default="{ hover }" open-delay="200" class="ma-1">
<v-btn color="primary"
v-if="..." v-on:click="..." :elevation="hover ? 16 : 2"
>
Button Title
</v-btn>
</v-hover>
It is working, but in Chrome I get the warning "v-hover should only contain a single element".
Any advice to avoid this?
The v-if removes the <v-btn/> element on the DOM so when showBtn is set to false, <v-hover/> is saying that it has no child.
Use v-show, instead of v-if, so the <v-btn/> element will not be removed entirely from the DOM. It will just hide it (similar to display: none;). OR put the v-if in the <v-hover/> element instead.
See this demo at codesandbox.
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>
Do you know where can i find an implementation of the super select of Google Data studio with the "Only" to select only that element ?
you can also filter results , super handy if the list is long :
There is a feature request for select-all functionality, and apparently it will be possible using to-be-implemented scoped-slot called prepend-item.
So currently you will need some workaround.
Updated codepen with prepend-item slot which came in version 1.2:
https://codepen.io/anon/pen/EdVpmY
(must look into filtering more so I'll update if something changes)
Note prepend-item is also part of the parent v-list component, so we can't easily fix controls to the top.
<template slot="prepend-item">
<v-list-tile #click.stop="selected = selectedAll ? [] : states.slice()">
<v-list-tile-action>
<v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>Select All</v-list-tile-title>
</v-list-tile>
<v-divider class="mt-2"></v-divider>
<v-list-tile class="search-tile">
<v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
</v-list-tile>
</template>
With regards to select-only functionality, you can use already supported scoped-slot item (see scoped slots in API docs) , and add select-only button yourself:
<v-select v-model="selected"
multiple
>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title>
{{ data.item }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden">
<v-btn #click.stop="selected = [data.item]">ONLY</v-btn>
</v-list-tile-action>
</template>
</v-select>
Codepen, note that some CSS is added as well.
Expanded codepen with select-all workaround using watch, and one of the items is "All". So if we want array of selected without "All" we can do something like return this.selected.filter(v => v !== "All") in computed property or wherever it's needed.
As much as I can see this is a custom component. The one you are showing is probable made with angular + material like in this example: https://stackblitz.com/edit/angular-material-select-multi-c6vtux
So I think that you probably will end needing a component like vue-multiselect, that is fully featured and probably will accomplish what you need and more, the only thing is that you will need to work on it to use material styles.
https://github.com/shentao/vue-multiselect
https://vue-multiselect.js.org
I guess, that if you need more features, you might be able to customize the template https://vue-multiselect.js.org/#sub-custom-option-template
Now check ¨Custom configuration¨, there you will find some examples that will show you you can actually do something like the "only" with some effort.
This is the most complete component I have found for vuejs to handle multi select.
I hope it helps.
It's a feature that hasn't been implemented. Ask you desire feature HERE.
Hope it help you.
how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Modal(false)
.Content(#<text>
<div class="armchair">
<img src="#Url.Content("~/content/web/window/armchair-402.png")"
alt="Artek Alvar Aalto - Armchair 402" />
Artek Alvar Aalto - Armchair 402
</div>
<p>
Alvar Aalto is one of the greatest names in modern architecture and design.
Glassblowers at the iittala factory still meticulously handcraft the legendary
vases that are variations on one theme, fluid organic shapes that let the end user
ecide the use. Interpretations of the shape in new colors and materials add to the
growing Alvar Aalto Collection that remains true to his original design.
</p>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.
So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.
Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.
You just need to use the following HTML:
<div class="k-block"><div class="k-header">Header</div>Block with header</div>
the z-index is set on the "style" property dynamically of the div.
with css all you need is an !important rule that will override styles defined on the element.
#mycontainer .k-window{
z-index: 3 !important;
}