Using vuetify example source below:
https://vuetifyjs.com/en/components/navigation-drawers/#expand-on-hover
enter image description here
when the mouse hover, drawer opens
My code is like this (same as the example):
<div class="ma-12 pa-12">
<v-card>
<v-navigation-drawer
permanent
expand-on-hover
>
<v-list>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-list-item link>
<v-list-item-content>
<v-list-item-title class="text-h6">
Sandra Adams
</v-list-item-title>
<v-list-item-subtitle>sandra_a88#gmail.com</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list
nav
dense
>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-folder</v-icon>
</v-list-item-icon>
<v-list-item-title>My Files</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-account-multiple</v-icon>
</v-list-item-icon>
<v-list-item-title>Shared with me</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-title>Starred</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
</div>
I expected to open drawer when mouse-hover. but i get this preview below:
[it's already opend! and it looks weired somehow..][3]
my vue version is 3.
and i don't know why.. if i copy & paste the examples from vuetify website, it doesn't work properly (text-field properties like outline, dense.. don't apply too T_T)
Related
I'm trying to prepend the drop down arrow on a v-list-group and append a search icon. It's working, but the search icon flips when the list is opened and not the dropdown icon like is to be expected
<v-list-group
v-for="item in items"
:key="item.title"
prepend-icon="$expand"
append-icon="search"
v-model="item.active"
no-action
>
<template v-slot:activator v-slot:prependIcon>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="child in item.items"
:key="child.title"
>
<v-list-item-avatar>
<v-img max-height="30" max-width="30" :src="child.avatar"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="child.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
How do I fix this?
Codepen example.
For the solution I added the sub-group property to the list group and added the icon in the activator slot via v-list-item-icon.
<v-list-group
v-for="item in items"
:key="item.title"
prepend-icon="$expand"
v-model="item.active"
no-action
sub-group
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
<v-list-item-icon>
<v-icon>mdi-magnify</v-icon>
</v-list-item-icon>
</template>
<v-list-item
v-for="child in item.items"
:key="child.title"
>
<v-list-item-avatar>
<v-img
max-height="30"
max-width="30"
:src="child.avatar"
></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="child.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
sub-group isn't very well documented but apparently it moves the expand icon to the left.
I'm trying to hide the navigation drawer if the display is equal to or larger than md using the class in the following code with no luck:
<template>
<v-app>
<v-navigation-drawer
v-model="drawer"
class="hidden-md-and-up"
:mini-variant="miniVariant"
:clipped="clipped"
fixed
app
>
<v-list class="hidden-md-and-up">
<v-list-item
v-for="(item, i) in items"
:key="i"
:to="item.to"
router
exact
>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
What am I missing?
One option is to use the vuetify breakpoint on the permanent prop of v-navigation-drawer since you want it to permanently appear in all but medium and larger.
https://vuetifyjs.com/en/features/breakpoints/
Replace class="hidden-md-and-up" with :permanent="!$vuetify.breakpoint.mdAndUp" and the "!" since you want it to not show for mdAndUp.
<template>
<v-app>
<v-navigation-drawer
v-model="drawer"
:permanent="!$vuetify.breakpoint.mdAndUp"
:mini-variant="miniVariant"
:clipped="clipped"
fixed
app
>
<v-list class="hidden-md-and-up">
<v-list-item
v-for="(item, i) in items"
:key="i"
:to="item.to"
router
exact
>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</v-list-item>
</v-list>
How can i toggle the text displayed when a user toggles the expanded state of an expansion panel? I thought this would work but the 'open' value doesn't appear to trigger correctly.
<!-- Details -->
<v-expansion-panels flat hover>
<v-expansion-panel>
<v-expansion-panel-header disable-icon-rotate>
{{ title }}
<template v-slot:actions>
<span v-if="open" class="overline text--disabled">Show Details</span>
<span v-else class="overline text--disabled">Hide Details</span>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
I don't know if you are using vuetify v2, but I guess it.
So to get the "open" value, you must to use the default slot:
<v-expansion-panel>
<!-- add expand-icon="" to remove the arrow icon -->
<v-expansion-panel-header disable-icon-rotate expand-icon="">
<template v-slot:default="{ open }">
<v-row no-gutters>
<v-col cols="4">{{ title }}</v-col>
<v-col cols="4"></v-col>
<v-col cols="4">
<span v-if="!open" key="0" class="overline text--disabled">Show Details</span>
<span v-else key="1" class="overline text--disabled">Hide Details</span>
</v-col>
</v-row>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
<v-col cols="4">somos</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
You can use the header as you consider, I mean, without v-row or v-col:
<v-expansion-panel-header disable-icon-rotate v-slot="{ open }" expand-icon="">
<v-layout align-center justify-space-between/>
title
<span v-if="open" key="0" class="overline text--disabled">Show Details</span>
<span v-else key="1" class="overline text--disabled">Hide Details</span>
</v-layout>
</v-expansion-panel-header>
I'm building a card with some items and i need to align to the right the items with texts 3576000 (plus KG icon), 120/180, and 67%. Seems that i'm doing somethig wrong, the left margin is narrow than right margin of card,
<div id="app">
<v-app id="inspire" fluid>
<v-card>
<v-list>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">UNLOADED TRUCKS</v-list-item-title>
</v-list-item-content>
<v-btn icon>
<v-icon color="primary">mdi-refresh</v-icon>
</v-btn>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-icon>
<v-icon color="black" size=80>mdi-truck-check</v-icon>
</v-list-item-icon>
</v-list-item-content>
<v-list-item-content>
<v-list-item class="py-n5 my-n5">
<v-list-item-title align="right" class="px-n3 mx-n3">3576000</v-list-item-title>
<v-list-item-icon>
<v-icon color="black">mdi-weight-kilogram</v-icon>
</v-list-item-icon>
</v-list-item>
<v-list-item>
<v-list-item-title align="right" class="display-2">120/180</v-list-item-title>
</v-list-item>
<v-list-item class="py-n5 my-n5">
<v-list-item-subtitle align="right">67%</v-list-item-subtitle>
</v-list-item>
</v-list-item-content>
</v-list-item>
<v-progress-linear value=67></v-progress-linear>
<v-list-item class="py-n2 my-n2">
<v-list-item-icon class="px-0 mr-1">
<v-icon>mdi-clock</v-icon>
</v-list-item-icon>
<v-list-item-subtitle>Updated 19 minutes ago</v-list-item-subtitle>
</v-list-item>
<v-divider></v-divider>
<v-card-actions>
<v-btn text color="primary">Full Report</v-btn>
</v-card-actions>
</v-list>
</v-card>
</v-app>
sample is in https://codepen.io/wolverine4277/pen/ZEGBBze, and image show the differents margins is attached. I can't figure out how correct that, i try between and nothing change...
enter image description here
The left and right margins of the card are okay. The issue is with the padding and margins of the list items.
If you wrap the "v-list-item-icon" with v-list-item giving it the same class (py-n5 my-n5" then it would appear fine
<v-list-item class="py-n5 my-n5">
<v-list-item-icon>
<v-icon color="black" size=80>mdi-truck-check</v-icon>
</v-list-item-icon>
</v-list-item>
I am attempting to create a view where there is a top element with a secondary element vertically centered in the remaining space underneath it.
In my attempt, there is a section of whitespace that gets added below the second element which extends the height of the page instead of just filling it as intended.
A recreation of this issue can be found here: https://codepen.io/R3d4rmy/pen/BaBjvwy
<div id="app">
<v-app id="inspire">
<v-app-bar app color="indigo" dark>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container fluid class="fill-height">
<v-row class="fill-height">
<v-col
cols="12"
sm="10"
offset-sm="1"
md="8"
offset-md="2"
lg="6"
offset-lg="3"
xl="4"
offset-xl="4"
>
<v-row class="fill-height">
<v-col cols="12">
<v-row class="no-gutters">
<v-col cols="12">
<v-card class="mb-6" outlined>
<v-card-title>
Title
</v-card-title>
<v-card-text>
<div class="subtitle-2">
Subtitle
</div>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-text>
<v-text-field
flat
single-line
></v-text-field>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row class="fill-height no-gutters" align="center">
<v-col cols="12">
<v-row class="no-gutters" justify="center">
<v-col align-self="center" cols="12">
<v-card class="mb-6" outlined>
<v-card-title>
Why is there extra whitespace below this v-card?
</v-card-title>
<v-card-text>
<div class="subtitle-2">
And how do I get this v-card properly centered in the remaining space below the first v-card?
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer color="indigo" app>
<span class="white--text">© 2019</span>
</v-footer>
</v-app>
</div>
I feel I may be misunderstanding the syntax after the upgrade to 2.0 and not using v-row and v-col in the right way with fill-height. Any help is appreciated, thank you!
It seems like you're using too many v-rows and v-cols. You can get rid of a lot of those if you just want one card after another stacked in a column. The revised codepen is here: https://codepen.io/CodingDeer/pen/KKPzxYW
<div id="app">
<v-app id="inspire">
<v-app-bar app color="indigo" dark>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container fluid class="fill-height">
<v-row class="fill-height">
<v-col
cols="12"
sm="10"
offset-sm="1"
md="8"
offset-md="2"
lg="6"
offset-lg="3"
xl="4"
offset-xl="4"
>
<v-card class="mb-6" outlined>
<v-card-title>
Title
</v-card-title>
<v-card-text>
<div class="subtitle-2">
Subtitle
</div>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-text>
<v-text-field
flat
single-line
></v-text-field>
</v-card-text>
</v-card>
<v-col cols="12" class="pa-0 fill-height" justify-self='center'>
<v-row
align="center"
justify="center"
class="fill-height"
>
<v-card outlined>
<v-card-title>
Why is there extra whitespace below this v-card?
</v-card-title>
<v-card-text>
<div class="subtitle-2">
And how do I get this v-card properly centered in the remaining space below the first v-card?
</div>
</v-card-text>
</v-card>
</v-row>
</v-col>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer color="indigo" app>
<span class="white--text">© 2019</span>
</v-footer>
</v-app>
</div>