Tips2021.04.02

Vue.jsでページ上下のマージンをあてるコンポーネントを用意しよう！

Vue.jsで開発するとページ単位のコンポーネントを作りますよね？

その時に用意しておくと便利なコンポーネントがあるので紹介します！

目次

ページ上下のマージンを調整するコンポーネント
ページでの使用例
さいごに

ページ上下のマージンを調整するコンポーネント

Vue.jsでの開発に限ったことではありませんが、ページの上下にサイト共通のマージンをつけることありますよね？

完全に全ページ共通なら良いのですが、このページだけマージン無くしたいということってあると思うんですよ。

そんな時にも対応できる、コンテンツのマージン調整用のコンポーネントでラップしてページのコンポーネントを作成するとめちゃくちゃ便利です！

具体的には下記のようなコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div class="content" :class="{ 'content--top': top, 'content--bottom': bottom }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    top: {
      type: Boolean,
      default: true
    },
    bottom: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  &--top {
    margin-top: 20px;
  }

  &--bottom {
    margin-bottom: 20px;
  }
}
</style>

こういうコンポーネントを用意したら実際にページで使用してみます。

ページでの使用例

用意したコンポーネントにオプションをつけずに使用する場合は下記のようなコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<layout-content>
    	<div>ページに関係するコンテンツ</div>
    </layout-content>
</template>

<script>
import LayoutContent from '~/components/LayoutContent' // パスは適宜変更

export default {
	components: {
    	LayoutContent
    }
}
</script>

これでページの上下に20pxずつのマージンをつけることができます。

では次にページの上だけマージンいらないという場合です。
トップページなどヒーローエリアがあって、ヘッダーにぴったりくっつけたいって場合なんかにありがちなパターンですね。

そんな時はlayout-contentのtopのオプションとしてfalseを渡すことで、上の部分のマージンだけ取ることができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<layout-content :top="false">
    	<div>ページに関係するコンテンツ</div>
    </layout-content>
</template>

<script>
import LayoutContent from '~/components/LayoutContent' // パスは適宜変更

export default {
	components: {
    	LayoutContent
    }
}
</script>

さいごに

今回紹介したコンポーネントは本当に便利でVue.jsを使っているプロジェクトではいつも採用しています。

Vue.jsを使っていてページ上下のマージンをどのようにつけるか悩んでいる人は特に試してみてください！