Vuetify навигационная проблема ящика

1

Я хочу иметь 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/ Уменьшите доступ к ящику навигации, чтобы увидеть, о чем я говорю

  • 0
    попробуйте использовать vw , это относительно 1% ширины области просмотра
  • 0
    Если вы можете предоставить jsfiddle или codepen, это поможет
Показать ещё 1 комментарий
Теги:
vue.js
vuetify.js

1 ответ

1
Лучший ответ

Таким образом, компонент 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;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню