質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

0回答

1075閲覧

Vuetifyのnavigation-drawerのclippedの使い方

knj

総合スコア37

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

1クリップ

投稿2018/01/14 13:12

javascript

1<template> 2 <v-layout wrap> 3 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> 4 <el-menu-item index="1">Processing Center</el-menu-item> 5 <el-submenu index="2"> 6 <template slot="title">Workspace</template> 7 <el-menu-item index="2-1">item one</el-menu-item> 8 <el-menu-item index="2-2">item two</el-menu-item> 9 <el-menu-item index="2-3">item three</el-menu-item> 10 </el-submenu> 11 <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item> 12</el-menu> 13<div class="line"></div> 14 <v-navigation-drawer 15 v-model="drawer" 16 :mini-variant="mini" 17 dark 18 class="grey darken-4" 19 clipped 20 > 21 <v-list class="pa-1"> 22 <v-list-tile v-if="mini" @click.stop="mini = !mini"> 23 <v-list-tile-action> 24 <v-icon>chevron_right</v-icon> 25 </v-list-tile-action> 26 </v-list-tile> 27 <v-list-tile avatar tag="div"> 28 <v-list-tile-avatar> 29 <img src="https://randomuser.me/api/portraits/men/85.jpg" /> 30 </v-list-tile-avatar> 31 <v-list-tile-content> 32 <v-list-tile-title>John Leider</v-list-tile-title> 33 </v-list-tile-content> 34 <v-list-tile-action> 35 <v-btn icon @click.stop="mini = !mini"> 36 <v-icon>chevron_left</v-icon> 37 </v-btn> 38 </v-list-tile-action> 39 </v-list-tile> 40 </v-list> 41 <v-list class="pt-0" dense> 42 <v-divider light></v-divider> 43 <v-list-tile v-for="item in items" :key="item.title" @click=""> 44 <v-list-tile-action> 45 <v-icon>{{ item.icon }}</v-icon> 46 </v-list-tile-action> 47 <v-list-tile-content> 48 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 49 </v-list-tile-content> 50 </v-list-tile> 51 </v-list> 52 </v-navigation-drawer> 53 </v-layout> 54</template> 55 56<style scoped lang="scss"> 57 58.el-menu-demo { 59 margin-left: 80px; 60} 61 62.el-menu { 63 width: 100%; 64} 65 66</style> 67 68<script> 69 export default { 70 data () { 71 return { 72 drawer: null, 73 items: [ 74 { title: 'Home', icon: 'dashboard' }, 75 { title: 'About', icon: 'question_answer' } 76 ], 77 mini: false, 78 right: null, 79 activeIndex: '1', 80 activeIndex2: '2' 81 }; 82 }, 83 method: { 84 handleSelect(key, keyPath) { 85 console.log(key, keyPath); 86 } 87 } 88 } 89</script>

abusoluteを追加するとheightが100%になりますが、menubarにかぶります。
clippedにするとmenubarの下にうまう具合に位置しますが、heightが変更されてしまいます。

javascript

1<v-navigation-drawer 2 v-model="drawer" 3 :mini-variant="mini" 4 dark 5 class="grey darken-4" 6 clipped 7 >

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問