00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/01/29] – [Vuetifyでレスポンシブなヘッダー(toolbar)のリンク] adash333 | 00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/01/29] – [Vue.jsにMaterial Design Iconを導入] adash333 | ||
---|---|---|---|
行 63: | 行 63: | ||
{{: | {{: | ||
+ | これから作るもの | ||
+ | ソースコード | ||
+ | https:// | ||
+ | DEMO | ||
+ | https:// | ||
+ | {{: | ||
==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ==== | ==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ==== | ||
行 123: | 行 129: | ||
参考:https:// | 参考:https:// | ||
+ | |||
+ | 参考2:https:// | ||
+ | {{: | ||
+ | |||
+ | ==== src/ | ||
+ | {{: | ||
+ | {{: | ||
+ | src/ | ||
+ | < | ||
+ | import Vue from " | ||
+ | import VueRouter from " | ||
+ | |||
+ | // ルート用のコンポーネントを読み込む | ||
+ | import Home from " | ||
+ | import Contact from " | ||
+ | |||
+ | // | ||
+ | Vue.use(VueRouter); | ||
+ | |||
+ | // VueRouterインスタンスを生成 | ||
+ | const router = new VueRouter({ | ||
+ | // URLのパスと紐づくコンポーネントをマッピング | ||
+ | routes: [ | ||
+ | { path: "/", | ||
+ | { path: "/ | ||
+ | ] | ||
+ | }); | ||
+ | |||
+ | // 生成したVueRouterインスタンスをエクスポート | ||
+ | export default router; | ||
+ | |||
+ | // 参考:基礎から学ぶVue.js | ||
+ | // https:// | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ==== Vue.jsにMaterial Design Iconを導入 ==== | ||
+ | Material IconsとMaterial Design Iconsは別物らしく、公式サイトにmdi-codepenと記載されているアイコンは、Material Design Iconsだそうなのですが、そのままでは表示されません。 | ||
+ | https:// | ||
+ | |||
+ | -Add Dependencyからvue-material-design-iconsをインストール | ||
+ | -src/ | ||
+ | -src/ | ||
+ | |||
+ | src/main.js | ||
+ | < | ||
+ | import " | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | src/App.vue | ||
+ | < | ||
+ | // template内 | ||
+ | < | ||
+ | |||
+ | // script内 | ||
+ | import MenuIcon from " | ||
+ | |||
+ | components: { | ||
+ | CodepenIcon | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | 少しだけsrc/ | ||
+ | {{: | ||
+ | |||
+ | 参考:https:// | ||
+ | アイコンのリスト:https:// | ||
+ | Importするときの名前の付け方は、以下を参考。 | ||
+ | {{: | ||
+ | アイコンの大きさなどの変更の仕方がよくわからなかったので、今回は、なんと< | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | DEMO | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | ===== Vuetifyでレスポンシブなヘッダー(toolbar)その3 ===== | ||
+ | 以下のコードをCodeSandboxで写経してみたいと思います。 | ||
+ | https:// | ||
+ | |||
+ | これから作るもの | ||
+ | ソースコード | ||
+ | |||
+ | DEMO | ||
+ | |||
+ | |||
行 129: | 行 225: | ||
https:// | https:// | ||
- | |||
https:// | https:// | ||
行 135: | 行 230: | ||
Vuetifyのv-list-tileでページリンクさせたい | Vuetifyのv-list-tileでページリンクさせたい | ||
→探していたのはこれ! | →探していたのはこれ! | ||
+ | |||
+ | |||
00.vue用デザインフレームワークvuetify/05.vuetifyでheaderヘッダーとfooterフッター.txt · 最終更新: 2019/04/30 by adash333