Я хочу иметь vuetify "временный навигационный ящик" с шириной масштабирования. Компонент vuetify по умолчанию имеет ширину 300 пикселей, поэтому я так сильно его переусердствовал (используя 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>
Проблема в том, что, когда меню не активировано, оно скрыто на 300 пикселей слева от окна просмотра. Моя ширина масштабирования 13vw, на больших дисплеях, станет больше 300 пикселей, и, следовательно, оставит слайду навигационного меню, скрытого слева. Как я могу изменить скрытие по умолчанию меню навигации?
Jsfiddle: https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ Уменьшите доступ к ящику навигации, чтобы увидеть, о чем я говорю
Таким образом, компонент vuetify не поддерживает использование ничего, кроме пикселей для свойства width
компонента, поэтому у вас есть два варианта. Вместо этого вы можете использовать свойство width
с пикселями. Или вы можете добавить немного взлома css, чтобы вместо этого использовать vw.
Вариант 1: измените свой v-navigation-drawer
на следующее:
<v-navigation-drawer
v-model="drawer"
absolute
temporary
width="500"
>
Вариант 2:
добавьте это в свой css
.v-navigation-drawer--close.v-navigation-drawer--temporary {
transform: translateX(-13vw) !important;
}