there are similar questinos out there but none of them address this problem using vuetify/vue.
i have a list in my navigation drawer. it has a couple options and i when you click on an option it will change the page. i was hoping to have the option highlighted when you change the page (so you can see which page you are on).
i've tried messing with the css classes, using
.v-application a {
color: #1976d2;
}
and a few others; and while it will change the color of the tab, I want it to be transparent color until clicked upon
<v-navigation-drawer>
<v-list nav>
<v-list-item v-for="(link, i) in links" :key="i" :to="link.to">
<v-list-item-action>
<v-icon class="list">{{ link.icon }}</v-icon>
</v-list-item-action>
<v-list-item-title v-text="link.text" class="list" />
</v-list-item>
</v-list>
</v-navigation-drawer>
as you can see from this image, the active page that i am on (Dashboard) is not highlighted...
Related
I'm currently using Vue and vuetify to build a navigation drawer container. I have just about what I am looking for... However, when I click on the drawer icon, I lose the Title and the drawer icon. I want those to both stay there even when the drawer is open.
Is there any way to achieve this by using simply vuetify? I can obviously add a custom title in and then add an icon in as well. Here is my code and here are some screenshots to better help with what I'm trying to achieve. I've looked through the documentation, and I've also looked at the props for the navigation drawer. Hoping someone has a good workaround.
code:
<template>
<v-card height="100%" flat>
<v-app-bar elevation="0" class="transparent">
<v-app-bar-nav-icon #click="drawer = true"></v-app-bar-nav-icon>
<v-toolbar-title>{{ Title }}</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer prepend v-model="drawer" absolute temporary>
<v-list nav dense>
<v-list-item-group
v-model="group"
active-class="blue--text text--accent-4"
>
<v-list-item #click="setTitle(TitleList[0])" to="/home">
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<v-list-item #click="setTitle(TitleList[1])" to="/about">
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-title>About</v-list-item-title>
</v-list-item>
<v-list-item #click="setTitle(TitleList[2])" to="/investments">
<v-list-item-icon>
<v-icon>mdi-currency-usd</v-icon>
</v-list-item-icon>
<v-list-item-title>Investments</v-list-item-title>
</v-list-item>
<v-list-item #click="setTitle(TitleList[3])" to="/contact">
<v-list-item-icon>
<v-icon>mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-title>Contact</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
<v-divider></v-divider>
<router-view></router-view>
</v-card>
</template>
<script>
export default {
data() {
return {
drawer: false,
group: null,
Title: "Home",
TitleList: ["Home", "About", "Investments", "Contact"],
};
},
methods: {
setTitle(value) {
this.Title = value;
},
},
};
</script>
I think you're problem will be solved if do not passing absolute prop for v-navigation-drawer.
I have a v-list and v-list-item-group setup very similar to the one shown here in the Vuetify help:
https://vuetifyjs.com/en/components/lists/#flat
My problem comes if the user clicks on the same v-list-item twice - which then de-selects it without selecting another item.
I've tried mapping the v-model to a computed get(), set() and stopping the set, but this doesn't have any effect.
I really want the selected item to be set programmatically and I control it from an #click event.
Have you tried to use the mandatory property of v-list-item-group? It seems to do something close to what you want - the user cannot de-select an item, but can switch to another one. Something like this:
<v-card class="mx-auto" max-width="300" tile>
<v-list flat>
<v-subheader>REPORTS</v-subheader>
<v-list-item-group v-model="selectedItem" color="primary" mandatory>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
First when user select one item value of selected Item Group is changed to new value and when double click still item is selected and active.
Something like this:
<v-list-item-group
v-model="selectedItemGroup"
:mandatory="selectedItemGroup!=-1"
>
</v-list-item-group>
<script>
export default {
data:function(){
selectedItemGroup:-1,
}
}
</script>
I'm having a difficult time setting the height to match size of the browser window and setting the color of vuetify's card.
I've copied the example code from vuetiy as show below:
<template>
<v-card
class="mx-auto"
height="400"
width="256"
>
<v-navigation-drawer
class="deep-purple accent-4"
dark
permanent
>
<v-list>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<template v-slot:append>
<div class="pa-2">
<v-btn block>
Logout
</v-btn>
</div>
</template>
</v-navigation-drawer>
</v-card>
</template>
<script>
export default {
data () {
return {
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Account', icon: 'mdi-account-box' },
{ title: 'Admin', icon: 'mdi-gavel' },
],
}
},
}
</script>
But the colour doesn't show up as purple. Instead it's showing as dark grey. If I remove the dark attribute in v-navigation-drawer then it just appears white.
Changing the v-card's height to 100% seems to just change the card's height to 100 instead of 100%. I'm really confused as from what I can see here, How to set the height of vuetify card, having
<v-card
height=100%
>
would have fixed the issue but it doesn't. I must be missing something simple?
So I did end up able to modify change the height and the colour although I'm not sure why it can't be done within the card tag.
In the navigation drawer I made some changes as shown below and the color as well as the height changed.
<v-navigation-drawer
class="accent-4"
width="200"
height="100vh"
color="rgba(56, 95, 115,0.5)"
permanent
>
I also removed the v-card tag completely.
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
fab
color="green"
v-on="on"
bottom
right
fixed
:loading="isRefreshing"
#click="refreshFiles"
>
<v-icon color="white">mdi-sync</v-icon>
</v-btn>
</template>
<span>Refresh</span>
</v-tooltip>
<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
<template v-for="item in menuItems">
<v-btn
v-if="item.isVisible"
:key="item.title"
icon
#click="goToRoute({ name: item.name, params: item.params })"
>
<span>{{ item.title }}</span>
<v-icon>{{ item.icon }}</v-icon>
</v-btn>
</template>
<v-btn icon #click="toProfileEdit">
<span>Profile</span>
<v-icon>mdi-account</v-icon>
</v-btn>
</v-bottom-navigation>
I am using vuejs with vuetify, I have one query where I am stuck, The issue is I am using bottom navigation bar to route to various components(pages), and each page has a floating action button in right bottom, The issue the floating action button is getting hide inside the bottom navigation bar.
Is there any idea or way on how to overcome this issue ??
Any help with example would be appreciated ..
As you can see the green button is getting hide behind bottom nav bar.
Try out to use an inline style :
<v-btn style="z-index:100; bottom:72px;" fab ...
I am wondering how I can attach links to items within a Vuetify autocomplete. I would like to do this so that it would act as a search bar. As of right now, I can attach links to the v-list-item but the link won't cover the entire width of the container. It appears to just form a link around the text instead of the entire item. I've tried to wrap the entire component but that doesn't seem to work either. I've also tried looking at the docs (https://vuetifyjs.com/en/components/autocompletes/) but I can't seem to find anything on making items links there either. Thanks for any help in advance.
<v-autocomplete
v-model="model"
:items="users"
:loading="isLoading"
:search-input.sync="search"
clearable
hide-details
hide-selected
item-text="username"
item-value="symbol"
placeholder="Search"
flat
solo
dense
>
<template v-slot:item="{ item }">
<v-list>
<v-list-item-group v-model="item">
<v-list-item-content>
<v-list-item link :to="'users/' + item.id">
{{item.username}}
</v-list-item>
</v-list-item-content>
</v-list-item-group>
</v-list>
</template>
</v-autocomplete>
The item slot should be <v-list-item/> only since the wrapping element of those item slots are <v-list/> already by default.
<v-autocomplete
...
>
<template v-slot:item="{ item }">
<v-list-item link :to="'users/' + item.id">{{item.username}}</v-list-item>
</template>
</v-autocomplete>
Here's a demo.