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

# 概要

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

**環境**

* 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/)

# [App Bars] (https://vuetifyjs.com/en/components/app-bars)

## Props

### VAppBar

* [VAppBar] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VAppBar/VAppBar.ts)
* [VToolbar] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VToolbar/VToolbar.ts)
* [VSheet] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VSheet/VSheet.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)
* [Scrollable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/scrollable/index.ts)
* [SSRBootable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/ssr-bootable/index.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/toggleable/index.ts) 

```text
VAppBar ---- VToolbar ---- VSheet ---- BindsAttrs
        |                         `--- Colorable
        |                         `--- Elevatable
        |                         `--- Measurable
        |                         `--- Themeable
        |
        `--- Applicationable ---- Positionable
        `--- Scrollable
        `--- SSRBootable
        `--- Toggleable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VAppBar**    |clipped-left   |boolean          |false     |v-navigation-drawer         |          |
|               |clipped-right  |boolean          |false     |v-navigation-drawer         |          |
|               |collapse-on-scroll|boolean       |false     |                            |          |
|               |elevate-on-scroll|boolean        |false     |                            |          |
|               |fade-img-on-scroll|boolean       |false     |                            |          |
|               |hide-on-scroll |boolean          |false     |                            |          |
|               |inverted-scroll|boolean          |false     |                            |          |
|               |scroll-off-screen|boolean        |false     |                            |          |
|               |shrink-on-scroll|boolean         |false     |prominent,dense,short       |          |
|               |*value*        |boolean          |<font color="blue"><strong>true</strong></font> |                            |true      |
|**VToolbar**   |*absolute*     |boolean          |false     |                            |          |
|               |bottom         |boolean          |false     |                            |          |
|               |collapse       |boolean          |false     |                            |          |
|               |dense          |boolean          |false     |                            |          |
|               |extended       |boolean          |false     |                            |          |
|               |extension-height|number or string|<font color="blue"><strong>48</strong></font>|                            |48        |
|               |flat           |boolean          |false     |                            |          |
|               |floating       |boolean          |false     |                            |          |
|               |prominent      |boolean          |false     |                            |          |
|               |short          |boolean          |false     |                            |          |
|               |src            |string or object |undefined |v-img                       |''        |
|               |*tag*          |string           |<font color="blue"><strong>'header'</strong></font>|                            |'header'  |
|               |*tile*         |boolean          |<font color="blue"><strong>true</strong></font>|                            |true      |
|**VSheet**     |tag            |string           |-         |                            |'div' |
|               |tile           |boolean          |-         |                            | |
|Colorable      |color          |string           |undefined |                            | |
|Elevatable     |elevation      |number or string |undefined |                            | |
|Measurable     |height         |number or string |undefined |                            | |
|               |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 |
|Applicationable|app            |boolean          |false     |                            |          |
|Positionable   |absolute       |boolean          |-         |                            |          |
|               |fixed          |boolean          |false     |                            |          |
|Scrollable     |scroll-target  |string           |undefined |                            |          |
|               |scroll-threshold|string or number|undefined |                            |          |
|Toggleable     |value          |                 |          |                            |          |

## 実装例

### テーマ

**dark**

`dark`プロパティでダークテーマを適用したアプリケーションバーです。

```vue
<v-app dark>
  <v-app-bar dark>
    <v-app-bar-nav-icon />
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer />
    <v-btn icon>
      <v-icon>mdi-home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-account</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-app-bar>
  <v-content>
    <router-view />
  </v-content>
</v-app>
```

![appbar-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7f41ec3d-6c46-9405-53fe-17720d38d5a6.png)

**light**

`light`プロパティでライトテーマを適用したアプリケーションバーです。lightプロパティ以外のソースコードはダークテーマと同一です。
![appbar-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/84c08d83-0b27-b29a-25da-d23861d69c45.png)

### カラー

`color`プロパティでアプリケーションバーの背景色を指定します。
![appbar-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1dc4e9e9-b4b2-786c-dc7f-0a7897c2ae6b.png)

### エレベーション

`elevation`プロパティに`0`から`24`までの数値を指定できます。0は浮き上がり効果がなく、1以上で数値が大きくなるほどアプリケーションバーが浮き上がって見えます。
図は`elevation`プロパティに10を指定したものです。
![appbar-elevation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f375c54e-1032-d78e-31f1-07891adca48e.png)

`flat`プロパティを指定するとアプリケーションバーの浮き上がり効果を無くすことができます。（`elevation`プロパティに0を指定するのと同じ効果です）
![appbar-flat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a811dca7-30ed-ad8b-8444-80efa963c7bc.png)

### アプリケーションバーの高さを変える

下記のプロパティを指定することでアプリケーションバーの高さを変えることができます。デフォルトは56pxです。

|prop              |height |
|:-----------------|------:|
|dense             |48px   |
|short (default)   |56px   |
|prominent + dense |96px   |
|prominent + short |112px  |
|prominent         |128px  |

`dense`プロパティ指定時は48px。
![appbar-dense.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3387e7e3-1357-8d36-bd4d-51a93a9d9ecb.png)

`short`プロパティ指定時は56px。（デフォルトの高さなので指定しても変わりません）
![appbar-short.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/15576523-fe31-b431-8d1f-d401d032acb8.png)

`prominent` + `dense`プロパティ指定時は96px。
![appbar-prominent-dense.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5c49e80c-00e3-7985-2857-137c8f7463f7.png)

`prominent` + `short`プロパティ指定時は112px。
![appbar-prominent-short.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/505e3139-55ff-38ca-75d3-fb6885c54251.png)

`prominent`プロパティ指定時は128px。
![appbar-prominent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3cc5e046-85b8-93de-9541-8e4081dea873.png)

### スクロール時のエフェクト

#### スクロールで縮める

`shrink-on-scroll`プロパティを指定するとアプリケーションバーの高さが128pxになりスクロールすると縮みます。
`dense`、`short`プロパティと組み合わせて高さを変えることができます。

|prop                     |height |shrink |
|:------------------------|------:|------:|
|shrink-on-scroll         |128px  |56px   |
|shrink-on-scroll + dense |96px   |48px   |
|shrink-on-scroll + short |112px  |56px   |

![appbar-shrink-on-scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0b17e17a-3766-ba45-a621-eb6ebadcd3d3.gif)

#### スクロールで浮き上がらせる

`elevate-on-scroll`プロパティを指定するとスクロールで浮き上がる効果が発生します。`elevation`プロパティと併用はできません。
![appbar-elevate-on-scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/16270a5e-c3cb-f282-4b09-ee7bcb6977a1.gif)

#### スクロールで非表示にする

`hide-on-scroll`プロパティを指定すると下へスクロールすると非表示になります。拡張スロットは引き続き表示されます。
![appbar-hide-on-scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/797b8021-87c9-ccd8-5587-2177583fee44.gif)

※`inverted-scroll`、`scroll-off-screen`というプロパティもありますが、どのような動作をするのか確認できませんでした。

#### スクロール時のエフェクトが発生する閾値を決める

`scroll-threshold`プロパティでスクロール時のエフェクトが発生するスクロール距離を設定できます。
以下の2つのgifは、`scroll-threshold`プロパティの設定によって、`hide-on-scroll`と`fade-img-on-scroll`プロパティの効果が表れるまでの違いを確認したものです。

**`scroll-threshold`プロパティは未設定**
![appbar-scroll-threshold-0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/bbc9a2ec-ccec-bb90-00ee-88e44de1aa90.gif)

**`scroll-threshold`プロパティは300を設定**
![appbar-scroll-threshold-300.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/cb8a7fb2-1df4-3f80-70d2-3730db816b32.gif)

### アプリケーションバーの背景に画像を使う

`src`プロパティでアプリケーションバーの背景に画像を使用することができます。

```vue
<v-app-bar src="https://picsum.photos/1920/1080?random">
  <!-- 省略 -->
</v-app-bar>
```

![appbar-src-default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5c2ba91d-7afa-7537-3c5c-605382f25f0d.png)

さらに`img`スロットを併用することで画像にエフェクトを加えることができます。

```vue
<template v-slot:img="{ props }">
  <v-img v-bind="props" gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"></v-img>
</template>
```

![appbar-src.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/57e52041-2ef0-f4d8-95de-88463c523c28.png)

`fade-img-on-scroll`プロパティを指定するとスクロールで画像をフェードアウトさせることができます。
![appbar-fade-img-on-scroll-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ad1e1f5e-a0ae-053b-e2c3-3b3be4ec984e.gif)

`shrink-on-scroll`プロパティと併用することも可能です。
![appbar-fade-img-on-scroll-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e80696af-d266-0e3c-18a0-a8424e3f2795.gif)

### エクステンションの追加

`extension`スロットでアプリケーションバーの下部に拡張メニューを追加することができます。

```vue
<template v-slot:extension>
  <v-tabs align-with-title fixed-tabs color="white">
    <v-tabs-slider color="yellow"></v-tabs-slider>
    <v-tab><v-icon>mdi-home</v-icon></v-tab>
    <v-tab><v-icon>mdi-magnify</v-icon></v-tab>
    <v-tab><v-icon>mdi-account</v-icon></v-tab>
  </v-tabs>
</template>
```

図は上記のコードでタブグループを追加したものです。
![appbar-extention.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a4f7e949-1a32-de9d-9d3a-641f816c6184.png)

`extension`スロットの高さはデフォルトで48pxですが、`extension-height`プロパティで任意の高さに指定できます。図は72pxを指定したものです。
![appbar-extention-plus-72.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/940914a0-9e6e-ed9b-bb53-09af3b7de5f0.png)

`extended`プロパティを指定すると、`extension`スロットが無くても`extension`スロット分の高さをアプリケーションバーに加えます。

|prop                         |height ||
|:----------------------------|------:|-------:|
|extended + dense             |96px   |48px    |
|extended + short             |104px  |56px    |
|extended                     |112px  |64px    |
|extended + prominent + dense |144px  |96px    |
|extended + prominent + short |160px  |112px   |
|extended + prominent         |176px  |128px   |

図は`extended`プロパティを指定した状態で112pxの高さです。
![appbar-extended.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/4bc90d62-4062-4bcb-c4fd-1f79b255fad1.png)

`extension-height`プロパティも反映されます。図は72pxを指定したものです。
![appbar-extended-plus-72.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/4ed8484b-29b0-76e3-0d19-33219a8ba92c.png)

`extended`で追加した部分にも`hide-on-scroll`プロパティは有効です。
![appbar-hide-on-scroll-extended.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/899de612-413e-1f3d-0d33-6fe21a72e809.gif)

### アプリケーションバーをたたむ

`collapse`プロパティでアプリケーションバーをたたむことができます。このプロパティはプログラマティックに操作したいときに使用するようです。

![appbar-collapse.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3e852ac4-0fc5-e4e0-6c7e-eafc3b618019.gif)

`collapse-on-scroll`プロパティを指定するとスクロールでアプリケーションバーをたたみます。
![appbar-collapse-on-scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/332362f9-0c4a-0cb0-449f-f645084fbafd.gif)

### ナビアイコン

v-app-bar-nav-iconコンポーネントでナビアイコンを表示することができます。
デフォルトはハンバーガーメニュー(Material Design Iconsでは`mdi-menu`)です。

```vue
<v-app-bar>
  <v-app-bar-nav-icon />

  <!-- 省略 -->
</v-app-bar>
```

任意のアイコンへ変更する場合はv-iconコンポーネントで指定します。

```vue
<v-app-bar-nav-icon>
  <v-icon>mdi-vuetify</v-icon>
</v-app-bar-nav-icon>
```

![appbar-nav-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/63c0d44c-256c-ee30-2d0a-2f447c630786.png)