Vue.js/個人サイトを作ってみる/030_メニューを設置する

画面遷移のためのメニューを設置する。

所謂サイドメニューというのは、Vuetify のコンポーネントとしては、Navigation drawer というモノのようなのでそれを配置する。

このような感じになる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Hello</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div id="app">
        <v-app>
            <v-navigation-drawer v-bind:permanent="true" v-bind:fixed="true" v-bind:app="true">
                <v-list>
                    <v-list-tile>
                        <v-list-tile-action>
                            <v-icon>home</v-icon>
                        </v-list-tile-action>
                        <v-list-tile-content>
                            <v-list-tile-title>hogehoge</v-list-tile-title>
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-list-tile>
                        <v-list-tile-action>
                            <v-icon>flight</v-icon>
                        </v-list-tile-action>
                        <v-list-tile-content>
                            <v-list-tile-title>piyopiyo</v-list-tile-title>
                        </v-list-tile-content>
                    </v-list-tile>
                </v-list>
            </v-navigation-drawer>
            <v-content>
                <v-container>Hello world</v-container>
            </v-content>
        </v-app>
    </div>
</body>
</html>

ポイントはまずここで

<v-navigation-drawer v-bind:permanent="true" v-bind:fixed="true" v-bind:app="true">

コンポーネントを配置している。属性としていくつかのスイッチをオンにしている。

permanent はこいつを表示するということである。このコンポーネントは画面脇に出し入れ可能になっている。今回は出た状態で固定しておきたいので ON にしているというおことだ。

fixed はメニューを画面の一部に固定しておくということで、コンテンツ部のスクロールとは無関係に同じ位置に表示されることになる。

配置を app はアプリケーションの一部として管理するという意味らしく、これを ON にしていると、メニュー以外のコンテンツ部分の配置と協調する動作になる。この例で見ると、メニューが画面の左側に存在するので、コンテンツ部分がその分だけ右にシフトして表示される。この設定を OFF にすると、アプリケーションの配置を無視して、コンテンツの上にかぶさるようにメニューが表示される。

次にメニューのリストのコンポーネントを埋め込んでいるが、これはほぼ定型句だろう。

中で使っている v-icon は Icons - Material Design このページの一覧がデフォルトで使えるようになっていて、ここに出ている名前を指定するとそのアイコンが埋め込まれる。

javascript/vuejs/create_my_site_with_vuetify_and_vue_router/030_create_menu.txt · 最終更新: 2019-01-31 18:55 by ore

文書の先頭へ