I'm using the VuetifyJS dropdown menu component and I need to get it to the same width of the other button in my attached example. Unfortunately the block settings don't work.
CodePen example of the issue: https://codepen.io/anon/pen/djvyVw?&editors=101
<div id="app">
<v-app id="inspire">
<v-card>
<v-flex xs10 offset-xs1>
<v-btn block round depressed dark large color="green darken-4">
<v-icon large>info</v-icon>
</v-btn>
<v-menu offset-y>
<v-btn block outline round depressed dark large color="yellow darken-3" slot="activator">
<v-icon>info</v-icon>Learn More</v-btn>
<v-list>
<v-list-tile v-for="(item, index) in items" :key="index" #click="" :class="item.color">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-flex>
</v-card>
</v-app>
</div>
How to get it to full width like the other button?
Simply give v-menu the full-width attribute:
<v-menu offset-y full-width>
...
</v-menu>
Related
I'm trying to replicate a menu example from Vuetify but this is not working as easier as it's shown. Main items of the menu are displayed but I can't open the slots to show the sub items.
The example code is at: https://vuetifyjs.com/en/components/lists/#slots
<div>
<v-toolbar color="blue">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Topics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
<v-list>
<v-list-group v-for="item in items" :key="item.title" v-model="item.active" no-action :prepend-icon="item.action">
<template v-slot:activator>
<v-list-item link>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item>
</template>
<!--v-list-item-content -->
<v-list-item v-for="child in item.items" :key="child.title">
<v-list-item-title v-text="child.title"></v-list-item-title>
</v-list-item>
<!--/!--v-list-item-content -->
</v-list-group>
</v-list>
</div>
</template> ```
Vuetify for vue3 uses activator prop for their lists. For Example :
<v-list-group value="Admin">
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
title="Admin"
></v-list-item>
</template>
<v-list-item
v-for="([title, icon], i) in admins"
:key="i"
:title="title"
:prepend-icon="icon"
:value="title"
></v-list-item>
</v-list-group>
Here is a link for reference:
https://next.vuetifyjs.com/en/components/lists/
Here is a link for working sample:
https://codepen.io/pen?&editors=101
"Menus can be placed within almost any component" says in the Vuetify's docs
but I'm trying to place it into a List Item, and it doesn't work:
<template>
<v-row align="center" justify="center" cols="12">
<v-col cols="12" sm="10" md="6" lg="8">
<v-list three-line>
<v-subheader>Saved Addresses</v-subheader>
<template v-for="address in userAddresses">
<v-menu bottom left :id="address.id">
<template v-slot:activator="{ on, attrs }">
<v-list-item :key="address.id" #click="">
<v-list-item-avatar>
<v-icon>home</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{address.adress}}
</v-list-item-title>
<v-list-item-subtitle>{{address.country_id }}, {{address.state_id}},
{{address.city_id}}
<strong>| {{address.postal_code}}</strong></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<v-list>
<v-list-item>
<v-list-item-title>Edit</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
</v-list>
</v-col>
</v-row>
</template>
When I click any list item it doesn't show the dropdown menu, I tried different combinations of wrapping the menu template, but same result, or even error.
I've a project in which I've a datatable.vue which is looping through a data and showing some data table, have some button like edit, delete. What I want to achieve is in that loop, use a reusable dialog component, which will load and upon confirmation, trigger itemDelete method. the DialogComponent is vuetifiy (v-dialog).
<template v-slot:item.action="{ item }">
<v-btn icon color="blue" :to="{ path: updatePath, query: { id: item.id } }">
<v-icon small>mdi-pencil</v-icon>
</v-btn>
<v-btn icon color="red" #click="$emit('deleteItem', item)">
<v-icon small>mdi-delete</v-icon>
</v-btn>
</template>
this is current code of datatable, and has method deleteItem which deletes the item, I want to modify this and add reusable dialogbox (ill use this dialogbox later in other places), which will have confirmation of delete and triggers itemDelete method here.
on Vueitfy, I got this.
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Confirmation
</v-card-title>
<v-card-text>
Are you sure?
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="dialog = false"
>
Confirm
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
and I made component DialogBox of it, I'm new to Vue. Thanks
There is better way to do this:
write this in your item.action slot:
<template v-slot:item.action="{ item }">
<v-btn icon color="blue" :to="{ path: updatePath, query: { id: item.id } }">
<v-icon small>mdi-pencil</v-icon>
</v-btn>
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
icon
v-bind="attrs"
v-on="on"
>
<v-icon small>mdi-delete</v-icon>
</v-btn>
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Confirmation
</v-card-title>
<v-card-text>
Are you sure?
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="deleteItem(item)"
>
Confirm
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
and create the deleteItem method:
method:{
createItem(item){
this.$emit('deleteItem', item);
this.dialog = false;
}
}
I'm using vuetify to show the list items properly like in the below structure
Interests
btn1 btn2
btn3 btn4
Not Interests
btn1 btn2
btn3 btn4
But the title "Interests", "Not Interests" failed to appear properly.
<v-layout row wrap>
<v-flex xs12 v-for="kid in kids">
<v-card color="blue-grey darken-2" class="white--text">
<v-card-title primary-title>
<div>
<div class="headline">{{kid.name}}</div>
<span class="grey--text">{{kid.school.name}}</span>
</div>
<!--<div>Listen to your favorite artists and albums whenever and wherever, online and offline.</div>-->
</v-card-title>
<v-card-actions>
<v-list>
<v-list-tile #click="">
<v-list-tile-content>
<v-list-tile-title>Interests</v-list-tile-title>
<div>
<v-btn flat dark v-for="(interest, idx) in kid.interests" :key="idx">{{interest}}</v-btn>
</div>
</v-list-tile-content>
</v-list-tile>
<v-divider></v-divider>
<v-list-tile #click="">
<v-list-tile-content>
<v-list-tile-title>Not Interests</v-list-tile-title>
<div>
<v-btn flat dark v-for="(nointerest,idx) in kid.notinterests" :key="idx">{{nointerest}}</v-btn>
</div>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
I tried setting fixed height for the list items, but still I got the wrong alignment.
Codepen
Properly way is using two-line option
<v-list two-line>
...
</v-list>
Demo https://codepen.io/ittus/pen/aGeJPe
You can set height for list tile if you want
.list__tile {
height: 5rem !important;
}
I'm trying to get the navigation drawer clipped below the dialog toolbar.
The vuetify manual shows how this works using clipped under a normal toolbar but not with dialog. Recreated issue on: Code pen as well
I tried using fixed property or get it out of the card as well it does not work.
Wondering how else to get it work.
Vuetifyjs: 1.0.5
Vuejs: 2.5.9
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
clipped
right
width=""
height=""
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
Clipped failed to work but it can be clipped under the dialog tool bar with some inline style. Applied class ='mt-5' and style='top: 16px' to get the desired result.
Codepen
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
right
width=""
height=""
class='mt-5'
style='top: 16px'
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>