[英]Vuetify navigation drawer issue
I want to have a vuetify "temporary navigation drawer" with scaling width. 我想要一个具有缩放宽度的vuetify“临时导航抽屉”。 The vuetify component comes with 300px width by default, so I overrid it like so (using https://vuetifyjs.com/en/components/navigation-drawers "Temporary" example)
vuetify组件默认为300px宽,所以我像这样覆盖它(使用https://vuetifyjs.com/en/components/navigation-drawers “临时”示例)
<template>
<v-layout
wrap
style="height: 200px;"
>
<v-container>
<v-layout justify-center>
<v-btn
color="pink"
dark
@click.stop="drawer = !drawer"
>
Toggle
</v-btn>
</v-layout>
</v-container>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
style="width: 13vw" //I change width to 13vw here
>
</v-navigation-drawer>
</v-layout>
</template>
The problem is, when the menu is not activated, it is hidden 300px to the left of the viewport. 问题是,当菜单未激活时,它会隐藏在视口左侧300px处。 My scaling 13vw width, on larger displays, will become larger than 300px, and therefore leave a sliver of the navigation menu unhidden in the left.
在较大的显示器上,我的缩放13vw宽度将变得大于300px,因此在左侧隐藏了导航菜单的条子。 How can I change the default hiding of the navigation menu?
如何更改导航菜单的默认隐藏?
Jsfiddle: https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ Zoom out with the navigation drawer unactivated to see what I'm talking about Jsfiddle: https ://jsfiddle.net/agreyfield91/tgpfhn8m/957/缩小导航抽屉未激活,看看我在说什么
So the vuetify component doesn't support using anything but pixels for the width
property of the component so you have two options. 因此,vuetify组件不支持使用除像素之外的任何内容来获取组件的
width
属性,因此您有两个选项。 You can use the width
property with pixels instead. 您可以使用带有像素的
width
属性。 Or you can add a bit of a css hack to use vw instead. 或者你可以添加一些css hack来代替使用vw。
Option 1: change your v-navigation-drawer
to the following: 选项1:将您的
v-navigation-drawer
更改为以下内容:
<v-navigation-drawer
v-model="drawer"
absolute
temporary
width="500"
>
Option 2: 选项2:
add this to your css 将此添加到您的CSS
.v-navigation-drawer--close.v-navigation-drawer--temporary {
transform: translateX(-13vw) !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.