Vuetifiy の一覧に戻る

Vuetify 2.0 で Toolbar, Navigation Drawers, Menus を作る

本稿では Vuetify 2.0 の空のプロジェクトに Toolbar を用意して Menu と Navigation Drawerを作成する方法をご紹介いたします。完成形はこちらで確認できます。作成済のファイルはこちらから取得できますので、ご自身のプロジェクトの土台としてご利用いただく事ができます

空のプロジェクトの準備

こちらの手順で vue-cli で作成するか、こちらの完成ファイルを利用します

Toolbar

components フォルダに Navbar.vue ファイルを以下のように作ります

<template>
  
</template>


<script>
export default {
  
}
</script>

App.vue で Navbar をインポート

<template><Nabvar /> タグを、 <script>import 、及び export default に components 行を追加します.



 







 



 






<template>
  <v-app>
    <Navbar />
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: { Navbar },
  data: () => ({
    //
  }),
};
</script>


 










<template>
  <nav>
    <v-toolbar></v-toolbar>
  </nav>
</template>


<script>
export default {
  
}
</script>

Google Material Icon CSS を public フォルダの index.html に追加

Material Icon を使うために css を link します










 











<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>ulbl-vuetify</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but ulbl-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>



 
 
 
 
 
 
 
 
 




<template>
  <nav>
    <v-toolbar>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Site</span>
        <span>Title</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>
  </nav>
</template>

<v-navigation-drawer> を以下のように追加します














 
 
 


  <nav>
    <v-toolbar>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Site</span>
        <span>Title</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

    <v-navigation-drawer v-model="drawer" app class="primary">
      <p>test</p>
    </v-navigation-drawer>
  </nav>

v-navigation-drawer の可視性を v-model="drawer" で操作できるよう、 drawer を export default に追加



 
 
 



<script>
export default {
  data: () => ({
    drawer: true
  }),
}
</script>


 











    <v-toolbar>
<!--      <v-toolbar-side-icon></v-toolbar-side-icon> -->
      <v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Site</span>
        <span>Title</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>



 




<script>
export default {
  data: () => ({
    drawer: false
  }),
}
</script>

Navbar.vue の <v-navigation-drawer><v-list> を追加します


 
 
 
 
 
 
 
 
 
 
 


    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-list>
        <!-- v-list-tile is changed to v-list-item -->
        <v-list-item>
          <v-list-item-action>
            <v-icon class="white--text">dashboard</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text">Dashboard</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

Navbar.vue の data オブジェクトに link を追加します.





 
 
 
 




<script>
export default {
  data: () => ({
    drawer: false,
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'contacts', text: 'About', route: '/about'},
    ]
  }),
}
</script>

v-list-item に v-for を追加し、 文字列リテラルをそれぞれ変数に変更します




 

 


 





    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-list>
        <!-- v-list-tile is changed to v-list-item -->
        <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
          <v-list-item-action>
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text">{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>









 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 







    <v-toolbar>
<!--      <v-toolbar-side-icon></v-toolbar-side-icon> -->
      <v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Site</span>
        <span>Title</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <!-- dropdown menu -->
      <v-menu offset-y>
        <template v-slot:activator="{ on }">
        <!-- <v-btn text slot="activator"> -->
        <v-btn text v-on="on">
          <v-icon left>expand_more</v-icon>
          <span>Menu</span>
        </v-btn>
        </template>
        <v-list>
          <!-- v-list-tile is changed to v-list-item -->
          <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

完成ファイルの利用

git clonw

このドキュメントの手順の完成ファイルは下記コマンドで clone することができます

git clone https://github.com/UedaTakeyuki/template4vutify.git -b v02

初期化

template4vutify フォルダに移動し、npm install で vue や vuetify 等の必要なパッケージをインストールます

cd template4vutify
npm install

テストサーバの起動

npm run serve でテストサーバを起動します http://localhost:8080/ もしくはテストサーバを起動したマシンの IP Address のポート 8080 番でテストサーバにアクセスできます

references


2019.08.23 posted.
2019.10.22 last updated