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/02/01] – [Vue.jsにMaterial Design Iconを導入] adash333 | ||
---|---|---|---|
行 63: | 行 63: | ||
{{: | {{: | ||
+ | これから作るもの | ||
+ | ソースコード | ||
+ | https:// | ||
+ | DEMO | ||
+ | https:// | ||
+ | {{: | ||
==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ==== | ==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ==== | ||
行 161: | 行 167: | ||
==== Vue.jsにMaterial Design Iconを導入 ==== | ==== Vue.jsにMaterial Design Iconを導入 ==== | ||
+ | Material IconsとMaterial Design Iconsは別物らしく、公式サイトにmdi-codepenと記載されているアイコンは、Material Design Iconsだそうなのですが、そのままでは表示されません。 | ||
+ | https:// | ||
+ | |||
-Add Dependencyからvue-material-design-iconsをインストール | -Add Dependencyからvue-material-design-iconsをインストール | ||
-src/ | -src/ | ||
行 171: | 行 180: | ||
{{: | {{: | ||
- | App.vue | + | src/App.vue |
< | < | ||
// template内 | // template内 | ||
行 178: | 行 186: | ||
// script内 | // script内 | ||
- | import | + | import |
components: { | components: { | ||
- | | + | |
} | } | ||
</ | </ | ||
{{: | {{: | ||
{{: | {{: | ||
+ | 少しだけsrc/ | ||
+ | {{: | ||
参考:https:// | 参考:https:// | ||
行 192: | 行 202: | ||
{{: | {{: | ||
アイコンの大きさなどの変更の仕方がよくわからなかったので、今回は、なんと< | アイコンの大きさなどの変更の仕方がよくわからなかったので、今回は、なんと< | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | DEMO | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | ===== Vuetifyでレスポンシブなヘッダー(toolbar)その3 ===== | ||
+ | 以下のコードをCodeSandboxで写経してみたいと思います。 | ||
+ | https:// | ||
+ | |||
+ | これから作るもの | ||
+ | ソースコード | ||
+ | |||
+ | DEMO | ||
00.vue用デザインフレームワークvuetify/05.vuetifyでheaderヘッダーとfooterフッター.txt · 最終更新: 2019/04/30 by adash333