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

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

ただいまの
回答率

90.75%

  • Vue.js

    571questions

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

Vuetifyのnavigation-drawerのclippedの使い方

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 378

Kenji-kawamura

score 19

<template>
  <v-layout wrap>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
    <template slot="title">Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
  </el-submenu>
  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>
<div class="line"></div>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="mini"
      dark
      class="grey darken-4"
      clipped
    >
      <v-list class="pa-1">
        <v-list-tile v-if="mini" @click.stop="mini = !mini">
          <v-list-tile-action>
            <v-icon>chevron_right</v-icon>
          </v-list-tile-action>
        </v-list-tile>
        <v-list-tile avatar tag="div">
          <v-list-tile-avatar>
            <img src="https://randomuser.me/api/portraits/men/85.jpg" />
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>John Leider</v-list-tile-title>
          </v-list-tile-content>
          <v-list-tile-action>
            <v-btn icon @click.stop="mini = !mini">
              <v-icon>chevron_left</v-icon>
            </v-btn>
          </v-list-tile-action>
        </v-list-tile>
      </v-list>
      <v-list class="pt-0" dense>
        <v-divider light></v-divider>
        <v-list-tile v-for="item in items" :key="item.title" @click="">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
  </v-layout>
</template>

<style scoped lang="scss">

.el-menu-demo {
  margin-left: 80px;
}

.el-menu {
  width: 100%;
}

</style>

<script>
  export default {
    data () {
      return {
        drawer: null,
        items: [
          { title: 'Home', icon: 'dashboard' },
          { title: 'About', icon: 'question_answer' }
        ],
        mini: false,
        right: null,
        activeIndex: '1',
        activeIndex2: '2'
      };
    },
    method: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

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

<v-navigation-drawer
      v-model="drawer"
      :mini-variant="mini"
      dark
      class="grey darken-4"
      clipped
    >
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    monaca onsen ui ver2 で ng-repeat を使用したい。

    前提・実現したいこと お世話になります。 monaca で ng-repeatを使用したく、 下記のページを参考にしてmonaca-onsen navigation にて プロ

  • 解決済

    monacaでindex.html 以外で onsen UI を使うには?

    前提・実現したいこと 去年の段階で、MonacaでJavascriptとhtml5、css3、を使ってアプリを作成し、今年3月からアップル・デヴェロッパー・プログラムとグーグル・プ

  • 解決済

    Bootstrapのcollapseが閉じない

    BootflatというBootstrap3のテンプレを使ってサイトを構築しているのですが、 スマホ表示した時のいわゆる「ハンバーガーアイコン」の挙動がうまくいきません。 開く時

  • 解決済

    色が反映されないです

    前提・実現したいこと ここにブートストラップを導入して学校の課題サイトを作ろうと考えています。 スタイルがどうしても反映されないので質問をしにきました。 本当は黒になるはずです!!

  • 解決済

    replaceWithでcloneしたinput type="file" 要素で再度、アップロードで...

    一度、アップロードしたファイルについて、サムネイルを表示して、これをユーザーが削除し、 再びアッップロードできるコードをJSで書いております。 JSBIN removeで削

  • 解決済

    jsからons-templateへの画面遷移

    前提・実現したいこと monacaでonsenui+angularjs1で開発をしております。 ons-list-itemに表示されたアイテムをタップした時に、ng-clickイベ

  • 解決済

    スクリプトが競合しているとこを教えてください

    スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。 何かが競合しているのでしょうか? 解決策をご教授お願いいたします。 <!doctype ht

  • 解決済

    HTMLでタイルをリンク用のボタンとしたい

    現在、ハイブリッドアプリの開発を行っております。 その際、div要素で作成したタイルをリンク用のボタンとしたいのですが リンクが機能しません。 中にアイコンや文言を配置した場合

同じタグがついた質問を見る

  • Vue.js

    571questions

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