小村のポートフォリオサイト開発(4) レイアウト、ヘッダの記述
こんばんは、小村だよ!
ポートフォリオ作成における現時点までの苦労した点を記録するよ!
今回はレイアウトとヘッダあたりを書いていきまふ
サイト:Little Village
下図が記事作成時点でのTopページになるよ!よろしくね!
目次
- レイアウトの記述について
- ヘッダコンポーネントの記述について
-
v-app-bar
を使うか否か - Mixinの使い方
- タイトルやボタンの表記に小文字が使えない
記録
レイアウトの記述について
まずはレイアウトについてですね
nuxt.jsは通常、全ページ共通で
layouts
のdefault.vue
を読み込みます私は現在下記のように記述しています
<template> <v-app> <v-container> <Header /> </v-container> <v-main> <v-container> <nuxt /> </v-container> </v-main> </v-app> </template> <script> import Header from '../components/Header.vue' export default { components: { Header, }, } </script>
シンプルですが、
Vuetify
の基本要素が詰まってますねv-app
やv-main
、v-container
については、下記サイトがわかりやすいです※上記サイトに書かれている
v-content
は、v-main
に名前が変わりました
特に
v-container
で囲むと、画面サイズに応じていい具合に横幅を揃えてくれます
ヘッダの記述について
次に、
default.vue
から呼び出しているHeader
コンポーネントを見ていきます全容は以下。このうち、記述する中で悩んだことを書いていきます
<template> <div> <v-toolbar color="backgroundHeader" flat> <v-btn plain text to="/"> <v-icon class="mr-3">holiday_village</v-icon> <v-toolbar-title> <span class="button_text">Little Village</span> </v-toolbar-title> </v-btn> <v-spacer /> <v-btn icon @click="setMordInversion()"> <v-icon v-if="isDark">dark_mode</v-icon> <v-icon v-else>light_mode</v-icon> </v-btn> </v-toolbar> <v-toolbar color="backgroundMenu" dense flat> <v-spacer /> <v-btn-toggle v-model="menu_selected" tile group> <v-btn v-for="button in menu_buttons" :key="button.id" :value="button.value" :to="button.to" > <span class="button_text">{{ button.disp }}</span> </v-btn> </v-btn-toggle> </v-toolbar> </div> </template> <script> import Mixin from '../plugins/mixin' export default { mixins: [Mixin], data() { return { menu_selected: 0, menu_buttons: [ { id: 0, value: 'brog', to: '/', disp: 'Brog' }, { id: 1, value: 'about', to: '/about', disp: 'About' }, { id: 2, value: 'contact', to: '/contact', disp: 'Contact' }, ], } }, } </script> <style lang="scss" scoped> .button_text { font-family: 'Roboto Mono', sans-serif; font-weight: bold; text-transform: none; } </style>
v-app-bar
を使うか否か
Header.vue
を記述するうえで一番悩んだことは、v-app-bar
を使うかどうか- ちなみに今でも悩んでまス
v-app-bar
を使えば、高機能なヘッダやそれっぽいメニューが作れます特に今回のサイトは、下記サンプルを参考にすればほぼ同等のものが作れそう
参考:App bars
ただなぁ、と
今回私はヘッダを上付きにしたいーとかそういうことはあまり考えておらず
そうなると、色々簡単にできる
v-app-bar
の魅力が活かしづらいなぁとむしろ色々書き方に制約が出てきてめんどくさそうだなぁと思いやめました
ひとまずは上述の通り、
v-toolbar
を組み合わせてヘッダを作っております
Mixinの使い方
前回の記事で作成したMixinを、このヘッダで使用してます
記述箇所は下記の通り
上記の通り、インポートして
mixins: [Mixin],
と記述すれば使えます使っているものは2つ、
isDark
とsetMordInversion
を利用してます
computed: { isDark: { get() { return this.$vuetify.theme.dark }, }, methods: { setMordInversion() { return (this.$vuetify.theme.dark = !this.$vuetify.theme.dark) }, },
isDark
:ダークモードかどうかを判定setMordInversion
:画面モードを切り替えnuxt.config.js
の値にアクセスには上記の通りthis.$vuetify.~
と記述します
タイトルやボタンの表記に小文字が使えない
デフォルトでは
v-toolbar-title
やv-btn
に英小文字が、大文字に変換されます大きなお世話すぎる!!!
これに関しては、cssの
text-transform: none;
にて解除できますタイトルやボタンに下記のクラスを適用し、同時にフォントも変更してます
~ <style lang="scss" scoped> .button_text { font-family: 'Roboto Mono', sans-serif; font-weight: bold; text-transform: none; } </style>
おわりに
ヘッダについてはこれくらいかなー
もしかしたら将来、パンくずリストを追加するかもしれません
次回はメインコンテンツ部分の悩んだヵ所を記述していくよ!
ではでは、まったね~~~!