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)

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

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VFooter**    |*height*       |number or string |<font color="blue"><strong>auto</strong></font>|                            |'auto'    |
|               |inset          |boolean          |false     |v-navigation-drawer         |          |
|               |padless        |boolean          |false     |                            |          |
|               |*tile*         |boolean          |<font color="blue"><strong>true</strong></font>|                            |true      |
|Applicationable|app            |boolean          |false     |v-app                       |          |
|Positionable   |absolute       |boolean          |false     |                            |          |
|               |fixed          |boolean          |false     |                            |          |
|**VSheet**     |tag            |string           |<font color="blue"><strong>'div'</strong></font>|                            |'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`プロパティでダークテーマを適用したフッターです。

```vue
<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>
```

![footer_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/87fab44c-d508-2eac-a804-efd93c700a5e.png)

**light**

`light`プロパティでライトテーマを適用したフッターです。lightプロパティ以外のソースコードはダークテーマと同一です。
![footer_light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1ac476c4-2515-4efa-2115-d5aa868e8650.png)

### カラー

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

```vue
<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>
```

![footer_color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/82cb00c8-2f20-f4b8-644e-7297bc3917c6.png)

### エレベーション

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

```vue
<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を指定したフッターです。
![footer_elevation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ba1fff24-b708-3a80-cb13-82f2f5bbf807.png)

### パッドレス

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

```vue
<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`プロパティを指定したフッター（パディングなし）、右側がデフォルト（パディングあり）のフッターです。濃い青色の部分がパディングになります。
![footer_padless.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/2dcbd142-ca33-0da5-6f0b-ba02f8651f6d.png)

### タイル

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

```vue
<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にしたフッターです。
![footer_tile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/61f63257-90d5-6ac9-ae27-7ef25f142c12.png)

### サイズ

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

```vue
<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>
```

```vue
<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>
```

![footer_size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/cee0211f-bb89-dd7b-0c82-1fd4fa40e82a.png)

### ポジション

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

```vue
<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コンポーネントの下部にフッターを配置したものです。
![footer_absolute.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a0e8040f-3e50-e16b-1730-90a6fb8d54c4.png)