web-dev-qa-db-ja.com

ナビゲーションドロワーの問題を検証する

スケーリング幅のある「一時的なナビゲーションドロワー」をvuetifyしたい。 vuetifyコンポーネントにはデフォルトで300pxの幅が付属しているので、そのようにオーバーライドします（ https://vuetifyjs.com/en/components/navigation-drawers "Temporary"の例を使用）

<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>

問題は、メニューがアクティブ化されていない場合、ビューポートの左側300pxに非表示になることです。大きなディスプレイでの私のスケーリング13vw幅は、300pxより大きくなるため、ナビゲーションメニューの断片が左側に隠れないままになります。ナビゲーションメニューのデフォルトの非表示を変更するにはどうすればよいですか？

Jsfiddle： https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ ナビゲーションドロワーを非アクティブにしてズームアウトし、私が話していることを確認します

javascriptcssvue.jsvuetify.js
4
user7548189

したがって、vuetifyコンポーネントは、コンポーネントのwidthプロパティにピクセル以外の使用をサポートしていないため、2つのオプションがあります。代わりに、ピクセルで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;
}
6
Matti Price