Vuetify.js 2.2のFooterコンポーネントについて

概要

Footerコンポーネントの初歩的な使い方のまとめです。

• Windows 10 Professional 1909
• Node.js 12.14.1
• Vue.js 2.6.11
• Vuetify.js 2.2.15

参考

• [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start)
• [Components] (https://vuetifyjs.com/en/components/api-explorer)
• [Styles - Colors] (https://vuetifyjs.com/en/styles/colors)
• [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/)

[Footers] (https://vuetifyjs.com/en/components/footer)

Props

VFooter

• [VFooter] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VFooter/VFooter.ts)
• [Applicationable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/applicationable/index.ts)
• [Positionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/positionable/index.ts)
• [VSheet] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VSheet/VSheet.ts)
• [SSRBootable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/ssr-bootable/index.ts)

VFooter ---- Applicationable ---- Positionable
        |
        `--- VSheet ---- BindsAttrs
                    `--- Colorable
                    `--- Elevatable
                    `--- Measurable
                    `--- Themeable

	name	type	default	relation	src
VFooter	height	number or string	auto		'auto'
	inset	boolean	false	v-navigation-drawer
	padless	boolean	false
	tile	boolean	true		true
Applicationable	app	boolean	false	v-app
Positionable	absolute	boolean	false
	fixed	boolean	false
VSheet	tag	string	'div'		'div'
	tile	boolean	-
Colorable	color	string	undefined
Elevatable	elevation	number or string	undefined
Measurable	height	number or string	-
	max-height	number or string	undefined
	max-width	number or string	undefined
	min-height	number or string	undefined
	min-width	number or string	undefined
	width	number or string	undefined
Themeable	dark	boolean	false		null
	light	boolean	false		null

実装例

テーマ

dark

darkプロパティでダークテーマを適用したフッターです。

<v-card dark height="150" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer dark padless>
  <v-card tile width="100%" class="text-center">
    <v-card-text>
      <v-btn class="mx-4" icon>
        <v-icon size="24px">mdi-account</v-icon>
      </v-btn>
      <v-btn class="mx-4" icon>
        <v-icon size="24px">mdi-home</v-icon>
      </v-btn>
      <v-btn class="mx-4" icon>
        <v-icon size="24px">mdi-email</v-icon>
      </v-btn>
      <v-btn class="mx-4" icon>
        <v-icon size="24px">mdi-calendar</v-icon>
      </v-btn>
      <v-btn class="mx-4" icon>
        <v-icon size="24px">mdi-delete</v-icon>
      </v-btn>
    </v-card-text>
    <v-divider />
    <v-card-text class="font-weight-medium">2020 — Footer</v-card-text>
  </v-card>
</v-footer>

light

lightプロパティでライトテーマを適用したフッターです。lightプロパティ以外のソースコードはダークテーマと同一です。

カラー

colorプロパティでフッターの背景色を指定します。

<v-card height="120" color="white" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer color="red">
  <v-col class="font-weight-medium text-center" cols="12">2020 — Footer</v-col>
</v-footer>

エレベーション

elevationプロパティに0から24までの数値を指定できます。数値が大きくなるほどフッターが浮き上がって見えます。

<v-card height="120" color="white" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer elevation="10">
  <v-col class="font-weight-medium text-center" cols="12">2020 — Footer</v-col>
</v-footer>

図はelevationに10を指定したフッターです。

パッドレス

padlessプロパティを指定するとフッターのパディングを除去します。デフォルトでは上下6px、左右16pxのパディングがあります。

<v-card height="120" color="white" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer color="blue" padless>
  <v-col class="font-weight-medium text-center" cols="12" style="background-color: #90CAF9;">2020 — Footer</v-col>
</v-footer>

左側がpadlessプロパティを指定したフッター（パディングなし）、右側がデフォルト（パディングあり）のフッターです。濃い青色の部分がパディングになります。

タイル

tileプロパティの値はデフォルトがtrueなので四角く表示されます。角を丸く表示するにはtileプロパティにfalseを指定します。

<v-card height="120" color="white" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer :tile="false" color="blue">
  <v-col class="font-weight-medium text-center" cols="12">2020 — Footer</v-col>
</v-footer>

左側がデフォルトのフッター、右側がtileをfalseにしたフッターです。

サイズ

width、heightプロパティでフッターのサイズを明示的に指定できます。他にサイズに関するプロパティはmin-width、max-width、min-height、max-heightがあります。

<v-card light height="120" width="400" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer width="400" color="blue darken-1">
  <v-col class="font-weight-medium text-center" cols="12">2020 — Footer</v-col>
</v-footer>

<v-card light height="120" tile>
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
</v-card>
<v-footer height="100" color="blue darken-1">
  <v-col class="font-weight-medium text-center" cols="12">2020 — Footer</v-col>
</v-footer>

ポジション

absoluteやfixedプロパティでフッターをページの下部に配置することができます。absoluteプロパティを指定するとフッターを配置したコンテナ内の下部に、fixedプロパティを指定するとページの下部に配置されます。

<v-card light tile height="300">
  <v-card-title>Main Contents</v-card-title>
  <v-card-text>contents...</v-card-text>
  <v-footer absolute color="lime lighten-3">
    <v-col class="font-weight-medium text-center" cols="12">2020 — Footer</v-col>
  </v-footer>
</v-card>

図は高さ300pxのv-cardコンポーネントの下部にフッターを配置したものです。