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を利用できるための準備 ====
@@ 行 162: / 行 165: @@
 ==== Vue.jsにMaterial Design Iconを導入 ====
 Material IconsとMaterial Design Iconsは別物らしく、公式サイトにmdi-codepenと記載されているアイコンは、Material Design Iconsだそうなのですが、そのままでは表示されません。
-https://vuetifyjs.com/ja/framework/iconsを見て、Material Design Iconsをインストールしようとしましたが、私の実力ではうまくいきませんでした。仕方がないので、vue-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をインストール
@@ 行 180: / 行 183: @@
 // script内
-import MenuIcon from "vue-material-design-icons/Menu.vue"
+import CodepenIcon from "vue-material-design-icons/Codepen.vue"
 components: {
-  MenuIcon
+  CodepenIcon
 }
 </code>
@@ 行 202: / 行 205: @@
 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フッター.1548792530.txt.gz · 最終更新: 2019/01/29 by adash333