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

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

ユーザ用ツール

サイト用ツール


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


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/01/29]
adash333 [Vue Routerのインストール]
00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/04/30] (現在)
adash333 [レスポンシブtoolbarとfooter]
行 53: 行 53:
  
  
- 
- 
-途中。 
  
 ===== Vuetifyでレスポンシブなヘッダー(toolbar)その2 ===== ===== Vuetifyでレスポンシブなヘッダー(toolbar)その2 =====
行 63: 行 60:
 {{:00.vue用デザインフレームワークvuetify:pasted:20190129-044719.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190129-044719.png}}
  
 +これから作るもの
 +ソースコード
 +https://github.com/adash333/Vue_Vuetify_Layout_baseline
 +DEMO
 +https://codesandbox.io/s/o4k30zkm0y
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-200457.png}}
 ==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ==== ==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ====
  
行 123: 行 126:
  
 参考:https://embed.plnkr.co/plunk/HFL4Pk6ohOM7lwRC 参考:https://embed.plnkr.co/plunk/HFL4Pk6ohOM7lwRC
 +
 +参考2:https://codepen.io/wernerm/pen/LjggoV
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-061352.png}}
 +
 +==== src/components/Home.vueとContact.vueの作成と、router.jsの変更 ====
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185654.png}}
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185707.png}}
 +src/router.js
 +<code>
 +import Vue from "vue";
 +import VueRouter from "vue-router";
 +
 +// ルート用のコンポーネントを読み込む
 +import Home from "./components/Home.vue";
 +import Contact from "./components/Contact.vue";
 +
 +//プラグインとして登録
 +Vue.use(VueRouter);
 +
 +// VueRouterインスタンスを生成
 +const router = new VueRouter({
 +  // URLのパスと紐づくコンポーネントをマッピング
 +  routes: [
 +    { path: "/", component: Home },
 +    { path: "/Contact", component: Contact }
 +  ]
 +});
 +
 +// 生成したVueRouterインスタンスをエクスポート
 +export default router;
 +
 +// 参考:基礎から学ぶVue.js
 +// https://cr-vue.mio3io.com/
 +</code>
 +
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185725.png}}
 +
 +==== Vue.jsにMaterial Design Iconを導入 ====
 +Material IconsとMaterial Design Iconsは別物らしく、公式サイトにmdi-codepenと記載されているアイコンは、Material Design Iconsだそうなのですが、そのままでは表示されません。
 +https://vuetifyjs.com/ja/framework/iconsを見て、Material Design Iconsをインストールしようとしましたが、私の実力ではうまくいきませんでした。(かなりググったのですが、Vuetifyで、デフォルトのMaterial Iconsに加えて、Material Design Iconsを同時に使用する方法が分かりませんでした。)仕方がないので、vue-material-design-iconsを使用してみたいと思います。
 +
 +  -Add Dependencyからvue-material-design-iconsをインストール
 +  -src/main.jsの変更
 +  -src/App.vueでimport
 +
 +src/main.js
 +<code>
 +import "vue-material-design-icons/styles.css"
 +</code>
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185145.png}}
 +
 +src/App.vue
 +<code>
 +// template内
 +<codepen-icon />
 +
 +// script内
 +import CodepenIcon from "vue-material-design-icons/Codepen.vue"
 + 
 +components: {
 +  CodepenIcon
 +}
 +</code>
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194314.png}}
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194529.png}}
 +少しだけsrc/App.vueを変更
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-200312.png}}
 +
 +参考:https://www.npmjs.com/package/vue-material-design-icons
 +アイコンのリスト:https://materialdesignicons.com/
 +Importするときの名前の付け方は、以下を参考。
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-193928.png}}
 +アイコンの大きさなどの変更の仕方がよくわからなかったので、今回は、なんと<h1>で囲んていますが、明らかにやり方間違っています。。。デモキニシナイ、、、
 +
 +ソースコード
 +https://github.com/adash333/Vue_Vuetify_Layout_baseline
 +DEMO
 +https://codesandbox.io/s/o4k30zkm0y
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-200457.png}}
 +
 +===== Vuetifyでレスポンシブなヘッダー(toolbar)その3 =====
 +以下のコードをCodeSandboxで写経してみたいと思います。
 +https://codepen.io/atgarbett/pen/QOZoyg
 +
 +これから作るもの
 +ソースコード
 +
 +DEMO
 +
 +
  
  
行 129: 行 222:
  
 https://codepen.io/kematzy/pen/oMgrjE/ https://codepen.io/kematzy/pen/oMgrjE/
 +
 +https://freitech.xsrv.jp/hobby/2018/06/19/post-221/
 +20180619
 +Vuetifyのv-list-tileでページリンクさせたい
 +→探していたのはこれ!
 +
 +
  
  
  
  


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