サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 0
総計: 2

sidebar

00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター


文書の過去の版を表示しています。


05.Vuetifyでheaderヘッダーとfooterフッター

Vuetifyでは、ヘッダーはtoolbarという名前になっています。フッターはfooterです。
https://vuetifyjs.com/en/components/toolbars

https://vuetifyjs.com/en/components/footer

メニュー

レスポンシブtoolbarとfooter

https://codepen.io/kematzy/pen/oMgrjE/をCodeSandboxで写経してみます。

CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。

  1. Add Dependencyから、Vuetifyをインストール
  2. index.htmlの編集
  3. src/main.jsの編集

  • src/App.vueを編集

以下のようになります。
ソースコード
https://codesandbox.io/s/14ry9r3lll
外観

途中。

Vuetifyでレスポンシブなヘッダー(toolbar)その2

以下のLayoutsの“Baseline”を、CodeSandboxで記載してみたいと思います。

https://vuetifyjs.com/ja/framework/pre-made-layouts

CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備

  1. CodeSandboxで新規Vue.jsアプリを作成
  2. Add Dependencyから、vuetifyをインストール
  3. index.htmlの<head></head>内に、“Material+Icons”を読み込む
  4. src/main.jsで、vuetifyとvuetify.cssをimportして、Vue.use(Vuetify);する。

index.htmlの追加コード

// </head>の直前に以下を挿入
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"/>

src/main.jsの追加コード

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.css";

Vue.use(Vuetify);

上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できます。

src/App.vueの変更

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/layouts/baseline.vue
のコードを、src/App.vueにコピペします。

(変更前)

(変更後)

しかし、これでは、Contactをクリックしても、Contactページに飛びません。。。

Vue Routerのインストール

  1. Add Dependencyからvue-routerをインストール
  2. src/router.jsの新規作成
  3. src/main.jsでrouter.jsを設定

src/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//プラグインとして登録
Vue.use(VueRouter)

src/main.jsに追加するコード

import router from './router'

// new Vueの中に記載
router,

参考:https://embed.plnkr.co/plunk/HFL4Pk6ohOM7lwRC

Vuetifyでレスポンシブなヘッダー(toolbar)のリンク


00.vue用デザインフレームワークvuetify/05.vuetifyでheaderヘッダーとfooterフッター.1548739817.txt.gz · 最終更新: 2019/01/29 by adash333