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

差分

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

この比較画面へのリンク

--- 00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/01/29] – [Vue.jsにMaterial Design Iconを導入] adash333
+++ 00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/04/30] (現在) – [レスポンシブtoolbarとfooter] adash333
@@ 行 53: / 行 53: @@
-途中。
 ===== Vuetifyでレスポンシブなヘッダー（toolbar）その2 =====
@@ 行 63: / 行 60: @@
 {{: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を利用できるための準備 ====
@@ 行 161: / 行 164: @@
 ==== 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の変更
@@ 行 171: / 行 177: @@
 {{:00.vue用デザインフレームワークvuetify:pasted:20190129-185145.png}}
-App.vue
+src/App.vue
 <code>
 // template内
@@ 行 178: / 行 183: @@
 // script内
-import MenuIcon from "vue-material-design-icons/Menu.vue"
+import CodepenIcon from "vue-material-design-icons/Codepen.vue"
 components: {
-  MenuIcon
+  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
@@ 行 192: / 行 199: @@
 {{: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

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