質問編集履歴
3
タイトル修正、行ったことを追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
スワイプでメニュー（vuetifyjsのv-navigation-drawer）が非表示になる挙動を止めたい
|
body
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
左端にv-navigation-drawerで表示させたメニューを、iPad（又はChrome開発者ツールでモバイル表示）で右から左へスワイプすると、メニュー
|
|
1
|
+
左端にv-navigation-drawerで表示させたメニューを、iPad（又はChrome開発者ツールでモバイル表示）で右から左へスワイプすると、メニュー非表示になってしまいます。
|
|
2
|
-
（この操作の時にv-navigation-drawer--closeというクラスが追加）
|
|
3
2
|
|
|
4
3
|
この挙動を防ぐ方法をご教授願えませんでしょうか。
|
|
5
4
|
|
|
@@ -24,6 +23,9 @@
|
|
|
24
23
|
</v-navigation-drawer>
|
|
25
24
|
```
|
|
26
25
|
|
|
26
|
+
・追記
|
|
27
|
+
この操作の時にv-navigation-drawer--closeというクラスが追加されていました。
|
|
28
|
+
|
|
27
29
|
v-navigation-drawer--closeに対するcssを打ち消してみましたが、根本的な解決方法ではないのでレイアウトが崩されてしまいました。。。
|
|
28
30
|
メニューが隠れる分のpaddingを調整するという挙動になっているようで、メニューを無理矢理残すと画面全体がメニューの幅だけ左へズレて、画面左端の一部がメニューの裏に隠れてしまいます。
|
|
29
31
|
|
2
タイトル修正、行ったことを追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
画面左に表示したメニューを固定させたい
|
|
1
|
+
vuetifyjsで画面左に表示したメニューを固定させたい
|
body
CHANGED
|
@@ -22,4 +22,16 @@
|
|
|
22
22
|
<div>test</div>
|
|
23
23
|
|
|
24
24
|
</v-navigation-drawer>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
v-navigation-drawer--closeに対するcssを打ち消してみましたが、根本的な解決方法ではないのでレイアウトが崩されてしまいました。。。
|
|
28
|
+
メニューが隠れる分のpaddingを調整するという挙動になっているようで、メニューを無理矢理残すと画面全体がメニューの幅だけ左へズレて、画面左端の一部がメニューの裏に隠れてしまいます。
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
.v-navigation-drawer {
|
|
32
|
+
transform: translateX(0%) !important;
|
|
33
|
+
&.v-navigation-drawer--close {
|
|
34
|
+
visibility: visible !important;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
25
37
|
```
|
1
ソース追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
画面左に表示したメニューを固定させたい
|
body
CHANGED
|
@@ -3,9 +3,23 @@
|
|
|
3
3
|
|
|
4
4
|
この挙動を防ぐ方法をご教授願えませんでしょうか。
|
|
5
5
|
|
|
6
|
+
```vue
|
|
6
7
|
<v-navigation-drawer
|
|
7
8
|
app
|
|
8
9
|
clipped
|
|
9
10
|
permanent
|
|
10
11
|
dark
|
|
11
|
-
>
|
|
12
|
+
>
|
|
13
|
+
<v-list-item>
|
|
14
|
+
<v-list-item-icon
|
|
15
|
+
>
|
|
16
|
+
<v-icon>
|
|
17
|
+
{{ mdi-menu' }}
|
|
18
|
+
</v-icon>
|
|
19
|
+
</v-list-item-icon>
|
|
20
|
+
</v-list-item>
|
|
21
|
+
|
|
22
|
+
<div>test</div>
|
|
23
|
+
|
|
24
|
+
</v-navigation-drawer>
|
|
25
|
+
```
|