Vuetify.js 2.2のSheet, Alert, Avatar, Badge, Iconコンポーネントについて

# 概要

Sheet、Alert、Avatar、Badge、Iconコンポーネントの初歩的な使い方のまとめです。

**環境**

* Windows 10 Professional 1909
* Node.js 12.14.1
* Vue.js 2.6.11
* Vuetify.js 2.2.8 (投稿時は2.2.4)

**参考**

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

# [Sheets] (https://vuetifyjs.com/en/components/sheets)

v-sheetコンポーネントは単体で使用する他に、他のコンポーネント(たとえばv-alert, v-btn, v-cardなど)のベースになる機能を提供しています。

## Props

### VSheet

* [VSheet] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VSheet/VSheet.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/colorable/index.ts)
* [Elevatable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/elevatable/index.ts)
* [Measurable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/measurable/index.ts)
* [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/themeable/index.ts)

```text
VSheet ---- BindsAttrs
       `--- Colorable
       `--- Elevatable
       `--- Measurable
       `--- Themeable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VSheet**     |tag            |string           |'div'     |                            |'div' |
|               |tile           |boolean          |false     |                            | |
|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 |

## 実装例

### テーマ

**dark**

```vue
<v-sheet dark height="100" max-width="auto" class="pa-1 mx-auto">dark</v-sheet>
<v-sheet dark tile height="100" max-width="auto" class="pa-1 mx-auto">dark, tile</v-sheet>
<v-sheet dark elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">dark, elevation=10</v-sheet>
<v-sheet dark tile elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">dark, tile, elevation=10</v-sheet>
```

```vue
<v-sheet dark color="primary" height="80" width="80" class="pa-1 ma-2">primary</v-sheet>
```

![sheet-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5c9fa410-1792-2ce5-307d-ac5dc86c4816.png)

**light**

```vue
<v-sheet light height="100" max-width="auto" class="pa-1 mx-auto">light</v-sheet>
<v-sheet light tile height="100" max-width="auto" class="pa-1 mx-auto">light, tile</v-sheet>
<v-sheet light elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">light, elevation=10</v-sheet>
<v-sheet light tile elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">light, tile, elevation=10</v-sheet>
```

```vue
<v-sheet light color="primary" height="80" width="80" class="pa-1 ma-2">primary</v-sheet>
```

![sheet-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/54383b89-ac18-7db0-82ea-7cd6c28a3272.png)

### カラー

```vue
<v-sheet color="red" height="80" width="80" class="pa-1 ma-2">red</v-sheet>
<v-sheet color="#EF5350" height="80" width="80" class="pa-1 ma-2">#EF5350</v-sheet>
```

![sheet-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/76caa555-55ae-4c4b-cf85-62863fd0d289.png)

### エレベーション

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

```vue
<v-sheet height="80" width="80" elevation="0" class="pa-1 ma-4">0</v-sheet>
<v-sheet height="80" width="80" elevation="24" class="pa-1 ma-4">24</v-sheet>
```

![sheet-elevation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/854f51ec-8b6f-1d9d-b67d-7a85c0b4e73a.png)

### サイズ

**height / width**

固定サイズです。

```vue
<v-sheet height="250" width="350" class="pa-1 ma-1 d-inline-block">Phasellus tempus. </v-sheet>
<v-divider class="my-3"></v-divider>
<v-sheet height="250" width="350" class="pa-1 ma-1 d-inline-block">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-sheet>
```

![sheet-height.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/98172d25-5c2d-4ff8-7fcc-c499e8a44203.png)

**min-height / min-width**

最小サイズを指定します。

```vue
<v-sheet min-height="250" min-width="350" class="pa-1 ma-1 d-inline-block">Phasellus tempus. </v-sheet>
<v-divider class="my-3"></v-divider>
<v-sheet min-height="250" min-width="350" class="pa-1 ma-1 d-inline-block">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-sheet>
```

![sheet-min-height.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7cea76b8-48e1-a3c0-b8a1-594afaad1dde.png)

**max-height / max-width**

最大サイズを指定します。

```vue
<v-sheet max-height="250" max-width="350" class="pa-1 ma-1 d-inline-block">Phasellus tempus. </v-sheet>
<v-divider class="my-3"></v-divider>
<v-sheet max-height="250" max-width="350" class="pa-1 ma-1 d-inline-block">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-sheet>
```

![sheet-max-height.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/368de353-dfc9-c52e-f67e-7e1ae667b9b2.png)

### タグ

```vue
<v-sheet tag="main" max-width="350" elevation="3" class="pa-2 mx-auto">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
</v-sheet>
```

`tag`プロパティで指定した要素で描画されます。

```html
<main class="pa-2 mx-auto v-sheet theme--light elevation-3" style="max-width: 350px;"> Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. </main>
```


# [Alerts] (https://vuetifyjs.com/en/components/alerts)

## Props

### VAlert

* [VAlert] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VAlert/VAlert.ts)
* [VSheet] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VSheet/VSheet.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/toggleable/index.ts)
* [Transitionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/transitionable/index.ts)

```text
VAlert ---- VSheet ---- BindsAttrs
       |           `--- Colorable
       |           `--- Elevatable
       |           `--- Measurable
       |           `--- Themeable
       |
       `--- Toggleable
       `--- Transitionable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VAlert**     |border         |string           |undefined |'top', 'right', 'bottom', 'left' | |
|               |close-label    |string           |'$vuetify.close' |dismissible          |'$vuetify.close' |
|               |colored-border |boolean          |false     |color                       | |
|               |dense          |boolean          |false     |                            | |
|               |dismissible    |boolean          |false     |close slot                  | |
|               |icon           |boolean or string|undefined |                            |'' |
|               |outlined       |boolean          |false     |                            | |
|               |prominent      |boolean          |false     |                            | |
|               |text           |boolean          |false     |color                       | |
|               |type           |string           |undefined |'success', 'info', 'warning', 'error' | |
|               |*value*        |boolean          |true      |                            |true |
|**VSheet**     |tag            |string           |'div'     |                            |'div' |
|               |tile           |boolean          |false     |                            | |
|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 |
|Toggleable     |value          |boolean          |-         |                            | |
|Transitionable |mode           |string           |undefined |                            | |
|               |origin         |string           |undefined |                            | |
|               |transition     |string           |undefined |                            | |

## 実装例

### テーマ

**dark**

```vue
<v-alert dark>dark</v-alert>
<v-alert dark elevation="10">dark, elevation=10</v-alert>
<v-alert dark color="success">dark, success</v-alert>
<v-alert dark color="info">dark, info</v-alert>
<v-alert dark color="warning">dark, warning</v-alert>
<v-alert dark color="error">dark, error</v-alert>
```

![alert-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/92b760d6-2a67-3563-20b1-c58dce32111a.png)

**light**

```vue
<v-alert light>light</v-alert>
<v-alert light elevation="10">light, elevation=10</v-alert>
<v-alert light color="success">light, success</v-alert>
<v-alert light color="info">light, info</v-alert>
<v-alert light color="warning">light, warning</v-alert>
<v-alert light color="error">light, error</v-alert>
```

![alert-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f3fb3488-5848-066b-b775-8d6a72669b4b.png)

### カラー

```vue
<v-alert color="red" icon="mdi-vuetify">red</v-alert>
```

![alert-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/50915e95-a5cd-cfc4-1b0e-e9f5245a48ff.png)

### エレベーション

```vue
<v-alert icon="mdi-vuetify" elevation="0">0</v-alert>
<v-alert icon="mdi-vuetify" elevation="24">24</v-alert>
```

![alert-elevation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/76297faa-1efc-5539-b5ef-a714e1f8ea74.png)

### タイプ

`type`プロパティに指定できる値はsuccess、info、warning、errorの4つです。指定するとタイプに応じてアイコンも表示されます。

```vue
<v-alert type="success" prominent>success</v-alert>
<v-alert type="info" prominent>info</v-alert>
<v-alert type="warning" prominent>warning</v-alert>
<v-alert type="error" prominent>error</v-alert>
```

**outlined**

```vue
<v-alert type="success" outlined prominent>success</v-alert>
<v-alert type="info" outlined prominent>info</v-alert>
<v-alert type="warning" outlined prominent>warning</v-alert>
<v-alert type="error" outlined prominent>error</v-alert>
```

![alert-type.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e5fce8dc-b2c1-09c3-6a34-976e43eaf9f8.png)

### ボーダー

`border`プロパティに指定できる値はtop、left、bottom、rightの4つです。同時に`colored-border`プロパティを指定するとボーダーに色が付きます。

```vue
<v-alert border="top">top</v-alert>
<v-alert border="left">left</v-alert>
<v-alert border="bottom">bottom</v-alert>
<v-alert border="right">right</v-alert>
```

![alert-border.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ebc9a761-4ce7-705b-26b8-34dd83a4b995.png)

**colored-border**

```vue
<v-alert color="red" border="top" colored-border>top, red</v-alert>
<v-alert color="green" border="left" colored-border>left, green</v-alert>
<v-alert color="blue" border="bottom" colored-border>bottom, blue</v-alert>
<v-alert color="black" border="right" colored-border>right, black</v-alert>
```

![alert-colored-border.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/2cb384a9-99d6-5f12-9575-2bd380c6e219.png)

### 形状

```vue
<v-alert tile>tile</v-alert>
<v-alert dense>dense</v-alert>
<v-alert outlined>outlined</v-alert>
<v-alert text>text</v-alert>
<v-alert dismissible>dismissible</v-alert>
<v-alert icon="mdi-vuetify">icon</v-alert>
```

![alert-shape.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/2f1be1a2-f6f6-9b45-48fd-bb7e033526bb.png)


### 組み合わせ

プロパティの組み合わせの一例です。

```vue
<v-alert color="pink accent-3" icon="mdi-vuetify" border="bottom" outlined dismissible elevation="3">icon, border, outlined, dismissible, elevation</v-alert>
<v-alert color="orange accent-3" icon="mdi-vuetify" border="bottom" tile text dismissible elevation="3">icon, border, tile, text dismissible, elevation</v-alert>
<v-alert color="cyan accent-3" icon="mdi-vuetify" border="bottom" dismissible elevation="3">icon, border, dismissible, elevation</v-alert>
<v-alert color="lime accent-3" icon="mdi-vuetify" border="bottom" tile dismissible>icon, border, tile, dismissible</v-alert>
```

![alert-conbi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e214ee9a-72a3-d70a-0c9b-dee9d31df5f9.png)

### プロミネント

`icon`プロパティで指定したアイコンを大きくかつ中央に表示します。

```vue
<v-alert icon="mdi-vuetify" outlined prominent min-height="300" width="auto">
Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
</v-alert>
```

左側が`prominent`プロパティを指定したアラートで、右側は指定なしのアラートです。
![alert-prominent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9c4ff04a-7f83-8b59-424a-2bc7d3675474.png)

### トランジション

`transition`プロパティを明示的に指定しなくてもデフォルトでトランジションは有効です。
`transition`プロパティにscale-transition、fade-transition、slide-x-transition、slide-y-transition、scroll-x-transition、scroll-y-transitionなどがあります。

```vue
<v-alert color="pink" dark border="top" icon="mdi-home" transition="scale-transition" prominent dismissible>
<v-subheader>scale-transition</v-subheader>
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
</v-alert>
```

下記のgifアニメーションはfade-transitionのものです。
![alert-fade.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a7322e96-6d55-872f-1b0a-a158b9d370ec.gif)

## Slots

**prepend**
アラート開始位置に表示するアイコンのスロット。

**append**
アラート終了位置に表示するアイコンのスロット。

**close**
アラートを閉じるアイコンのスロット。

```vue
<v-alert ref="alert" outlined transition="fade-transition" @input="inputEvent">
    <template v-slot:prepend>
        <v-icon size="32" color="green" left>mdi-arrow-left-bold</v-icon>
    </template>
    <template v-slot:append>
        <v-icon size="32" color="green" right>mdi-arrow-right-bold</v-icon>
    </template>
    <template v-slot:close>
        <v-btn icon @click="toggle">
            <v-icon size="32" color="red">mdi-close-box</v-icon>
        </v-btn>
    </template>
    Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
</v-alert>
<v-btn @click="toggle">toggle</v-btn>
```

![alert-slot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/dd1cb89f-57cd-39c6-04a8-cf8e2d35e3e5.png)

## Functions

**toggle**
アラートのアクティブ状態を切り替えます。 閉じるスロットで使用でき、非表示のクリックアクションとして使用されます。

```vue
methods: {
  toggle() {
    this.$refs.alert.toggle();
  },
  inputEvent(val) {
    // eslint-disable-next-line no-console
    console.log('input', val);
  }
}
```

クリックイベントに直接記述する方法もあります。

```vue
<v-btn icon @click="$refs.alert.toggle()">
    <v-icon size="32" color="red">mdi-close-box</v-icon>
</v-btn>
```


# [Avatars] (https://vuetifyjs.com/en/components/avatars)

## Props

### VAvatar

* [VAvatar] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VAvatar/VAvatar.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/colorable/index.ts)
* [Measurable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/measurable/index.ts)

```text
VAvatar  ---- Colorable
         `--- Measurable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VAvatar**    |left           |boolean          |false     |                            | |
|               |right          |boolean          |false     |                            | |
|               |size           |number or string |48        |                            |48 |
|               |tile           |boolean          |false     |                            | |
|Colorable      |color          |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 |                            | |

## 実装例

### スロット

**icon**

```vue
<v-avatar color="teal" class="ma-2">
  <v-icon class="white--text">mdi-alert</v-icon>
</v-avatar>

<v-avatar tile color="teal" class="ma-2">
  <v-icon class="white--text">mdi-alert</v-icon>
</v-avatar>
```

**tag**

```vue
<v-avatar color="cyan" class="ma-2">
  <span class="white--text headline">Aa</span>
</v-avatar>

<v-avatar tile color="cyan" class="ma-2">
  <span class="white--text headline">Aa</span>
</v-avatar>
```

**image**

```vue
<v-avatar color="indigo" class="ma-2">
  <v-img :src="require('@/assets/logo.png')" alt="vuetify.js"></v-img>
</v-avatar>

<v-avatar tile color="indigo" class="ma-2">
  <v-img :src="require('@/assets/logo.png')" alt="vuetify.js"></v-img>
</v-avatar>
```

![avatar-slot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b1d8723c-defd-d90d-d03f-816a687f97e5.png)

### カラー

```vue
<v-avatar color="red" class="ma-2">
  <v-icon>mdi-star</v-icon>
</v-avatar>
```

![avatar-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fa2de1b1-5704-9e68-aab1-5ef93b4dce8f.png)

### サイズ

サイズ指定は`size`か`height`と`width`プロパティで行います。

```vue
<v-avatar size="32" color="teal" class="ma-2">
  <span class="white--text headline">32</span>
</v-avatar>
```

**height / width**

```vue
<v-avatar height="32" width="64" color="teal" class="ma-2">
  <span class="white--text headline">32</span>
</v-avatar>
```

左側の4つが`size`プロパティを使ったもの、右側の4つが`height`、`width`プロパティを使ったものです。
![avatar-size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/78c66447-7acf-501a-4a2d-9527423a8e06.png)

### v-chipとの組み合わせ

`left`および`right`プロパティでv-chip内のアバターの位置を調整できます。

**left**

```vue
<v-chip class="ma-2">
  <v-avatar left color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>

<!-- left無し -->
<v-chip class="ma-2">
  <v-avatar color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>
```

**right**

```vue
<!-- rightなし -->
<v-chip class="ma-2">
  Alarm
  <v-avatar color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>

<v-chip class="ma-2">
  Alarm
  <v-avatar right color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>
```

![avatar-chip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/c8233e61-bfbe-c215-4cc3-679897b989ad.png)

#### pill

v-chipの`pillプロパティを指定するとアバター周りのマージンが無くなります。

**left**

```vue
<v-chip pill class="ma-2">
  <v-avatar left color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>

<v-chip pill class="ma-2">
  <v-avatar color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>
```

**right**

```vue
<v-chip pill class="ma-2">
  Alarm
  <v-avatar color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>

<v-chip pill class="ma-2">
  Alarm
  <v-avatar right color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>
```

![avatar-chip-pill.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5c3c35b7-23b8-3acd-e538-ca6e8d4bb802.png)

### v-btnとの組み合わせ

```vue
<v-btn class="ma-2">
  <v-avatar size="32" class="mr-2">
    <v-icon>mdi-folder-search-outline</v-icon>
  </v-avatar>
  Search
</v-btn>

<v-btn class="ma-2">
  <v-avatar size="32" class="mr-2">
    <span class="grey--text">(56)</span>
  </v-avatar>
  Search
</v-btn>
```

![avatar-botton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/4d1dacfd-2299-d2c8-3eb2-73f469b747c9.png)

※APIドキュメントにはv-btnでも`left`、`right`プロパティが使えると書かれていますが、動作確認ではCSSがあたっていないようで期待通りの動作にはなりませんでした。

> Designates that the avatar is on the left side of a component. This is hooked into by components such as v-chip and v-btn.


# [Badges] (https://vuetifyjs.com/en/components/badges)

## Props

### VBadge

* [VBadge] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VBadge/VBadge.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/colorable/index.ts)
* [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/themeable/index.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/toggleable/index.ts)
* [Transitionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/transitionable/index.ts)
* [Positionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/positionable/index.ts)

```text
VBadge  ---- Colorable
        `--- Themeable
        `--- Toggleable
        `--- Transitionable
        `--- Positionable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VBadge**     |avatar         |boolean          |false     |                            | |
|               |bordered       |boolean          |false     |dot                         | |
|               |*color*        |string           |'primary' |                            |'primary' |
|               |content        |any              |undefined |                            | |
|               |dot            |boolean          |false     |                            | |
|               |label          |string           |'$vuetify.badge'|                      |'$vuetify.badge' |
|               |icon           |string           |undefined |                            | |
|               |inline         |boolean          |false     |left                        | |
|               |offset-x       |number or string |undefined |                            | |
|               |offset-y       |number or string |undefined |                            | |
|               |overlap        |boolean          |false     |                            | |
|               |tile           |boolean          |false     |                            | |
|               |*transition*   |string           |'scale-rotate-transition'|             |'scale-rotate-transition' |
|               |*value*        |any              |true      |                            |true |
|Colorable      |color          |string           |-         |                            | |
|Themeable      |dark           |boolean          |false     |                            |null |
|               |light          |boolean          |false     |                            |null |
|Toggleable     |value          |boolean          |-         |                            | |
|Transitionable |mode           |string           |undefined |                            | |
|               |origin         |string           |undefined |                            | |
|               |transition     |string           |-         |                            | |
|Positionable   |bottom         |boolean          |false     |                            | |
|               |left           |boolean          |false     |                            | |

## 実装例

### テーマ

**dark**

```vue
<v-badge dark icon="mdi-check" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark bordered icon="mdi-check" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark overlap icon="mdi-check" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark bordered content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark overlap content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark tile content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark tile overlap content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark inline content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
```

![badge-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3b1fe50e-5a75-6ed9-d72b-211e47645a1d.png)

**light**

```vue
<v-badge light icon="mdi-check" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light bordered icon="mdi-check" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light overlap icon="mdi-check" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light bordered content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light overlap content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light tile content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light tile overlap content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light inline content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
```

![badge-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/bb8dd7cb-6479-945f-2fe8-6fa5fbbcd173.png)

### カラー

```vue
<v-badge light icon="mdi-check" color="red">
    <v-icon light x-large>mdi-email</v-icon>
</v-badge>
```

![badge-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7e07ca9f-ce30-f2a4-fbb1-6f104693cecd.png)

### ポジション

```vue
<v-badge left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge bottom left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge bottom color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
```

**overlap**

```vue
<v-badge overlap left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge overlap color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge overlap bottom left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge overlap bottom color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
```

左側の4つが`overlap`無しのもの、右側の4つが`overlap`有りのものです。
![badge-position.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/e49b4b81-8425-0c17-bebb-7b7bacd28e27.png)

### オフセット

```vue
<v-badge icon="mdi-check" offset-x="30" offset-y="18" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<v-badge icon="mdi-check" bottom offset-x="30" offset-y="18" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>
```

![badge-offset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fbfcc228-3d7d-aea8-8487-35632b299728.png)

### トランジション

```vue
<p>default</p>
<v-badge :value="trans" icon="mdi-check" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>fade</p>
<v-badge :value="trans" icon="mdi-check" transition="fade-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>scale</p>
<v-badge :value="trans" icon="mdi-check" transition="scale-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>slide-x</p>
<v-badge :value="trans" icon="mdi-check" transition="slide-x-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>slide-y</p>
<v-badge :value="trans" icon="mdi-check" transition="slide-y-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>scroll-x</p>
<v-badge :value="trans" icon="mdi-check" transition="scroll-x-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>scroll-y</p>
<v-badge :value="trans" icon="mdi-check" transition="scroll-y-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>
```

![badge-trans.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a300957a-7f13-c29c-263c-4d470cd36f0f.gif)

### ドット、ホバー

```vue
<v-badge color="blue" icon="mdi-check" :dot="!dot">
    <v-hover v-model="dot">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>

<v-badge color="blue" content="new" :dot="!dot">
    <v-hover v-model="dot">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>
```

![badge-dot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/606b1cc1-5fcc-7dfd-563e-2d76fc891041.gif)

```vue
<v-badge :value="hover" icon="mdi-check" transition="slide-x-reverse-transition">
    <v-hover v-model="hover">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>

<v-badge :value="hover" content="new" transition="slide-x-reverse-transition">
    <v-hover v-model="hover">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>
```

![badge-hover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/c052c337-8175-7339-6709-875566e0a4ae.gif)

## Slots

**badge**
バッジのコンテンツに使用されるスロット。

```vue
<v-badge color="blue" avatar>
    <template v-slot:badge>
        <v-avatar>
            <v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
        </v-avatar>
    </template>
    <v-icon x-large>mdi-email</v-icon>
</v-badge>
```

```vue
<v-badge color="blue">
    <template v-slot:badge>
        <div>{{ newMessage }}</div>
    </template>
    <v-icon x-large>mdi-email</v-icon>
</v-badge>
```

上記の書き方は次のように書き直すことができます。

```vue
<v-badge color="blue" :content="newMessage">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>
```

![badge-slot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/58e175ba-c079-4843-8cad-a3d55a23abd5.png)


# [Icons] (https://vuetifyjs.com/en/components/icons)

## Props

### VIcon

* [VIcon] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VIcon/VIcon.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/colorable/index.ts)
* [Sizeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/sizeable/index.ts)
* [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/themeable/index.ts)

```text
VIcon  ---- BindsAttrs
       `--- Colorable
       `--- Sizeable
       `--- Themeable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VIcon**      |dense          |boolean          |false     |                            | |
|               |disabled       |boolean          |false     |                            | |
|               |left           |boolean          |false     |                            | |
|               |right          |boolean          |false     |                            | |
|               |size           |number or string |undefined |                            | |
|               |tag            |string           |'i'       |                            |'i' |
|Colorable      |color          |string           |undefined |                            | |
|Sizeable       |large          |boolean          |false     |                            | |
|               |small          |boolean          |false     |                            | |
|               |x-large        |boolean          |false     |                            | |
|               |x-small        |boolean          |false     |                            | |
|Themeable      |dark           |boolean          |false     |                            |null |
|               |light          |boolean          |false     |                            |null |

## 実装例

### テーマ

**dark**

```vue
<v-icon dark size="48" class="ma-2">mdi-home</v-icon>
<v-icon dark size="48" class="ma-2">mdi-email</v-icon>
<v-icon dark size="48" class="ma-2">mdi-cloud</v-icon>
<v-icon dark size="48" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon dark size="48" class="ma-2">mdi-check-outline</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon dark size="48" color="info" class="ma-2">mdi-home</v-icon>
<v-icon dark size="48" color="warning" class="ma-2">mdi-email</v-icon>
<v-icon dark size="48" color="error" class="ma-2">mdi-cloud</v-icon>
<v-icon dark size="48" color="secondary" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon dark size="48" color="primary" class="ma-2">mdi-check-outline</v-icon>
```

![icon-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/823e1847-0493-2aa3-160e-dccc80f32ee0.png)

**light**

```vue
<v-icon light size="48" class="ma-2">mdi-home</v-icon>
<v-icon light size="48" class="ma-2">mdi-email</v-icon>
<v-icon light size="48" class="ma-2">mdi-cloud</v-icon>
<v-icon light size="48" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon light size="48" class="ma-2">mdi-check-outline</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon light size="48" color="info" class="ma-2">mdi-home</v-icon>
<v-icon light size="48" color="warning" class="ma-2">mdi-email</v-icon>
<v-icon light size="48" color="error" class="ma-2">mdi-cloud</v-icon>
<v-icon light size="48" color="secondary" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon light size="48" color="primary" class="ma-2">mdi-check-outline</v-icon>
```

![icon-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/37596ad8-055d-1cef-18e9-3c653a93adf9.png)

### カラー

```vue
<v-icon size="48" color="red" class="ma-2">mdi-monitor-dashboard</v-icon>
```

![icon-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/348fc6ff-464e-0d2a-e93c-36d13520227a.png)

### サイズ

```vue
<v-icon color="blue" x-small class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" small class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" dense class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" large class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" x-large class="ma-2">mdi-check-circle</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon color="blue" size="12" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="16" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="20" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="24" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="36" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="40" class="ma-2">mdi-check-circle</v-icon>
```

左側の6個は`x-small`～`x-large`プロパティを指定したアイコン、右側の6個は`size`プロパティを指定したアイコン。左右のアイコンの大きさが同じになるようにsizeを指定しています。
![icon-size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0bed1921-0a06-0348-bbca-47ce3a221c7e.png)

### 無効化

```vue
<v-icon class="ma-2">mdi-check-circle</v-icon>
<v-icon disabled class="ma-2">mdi-check-circle</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon color="blue" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" disabled class="ma-2">mdi-check-circle</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon color="red" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="red" disabled class="ma-2">mdi-check-circle</v-icon>
```

`disabled`プロパティを指定すると色が変わります。
![icon-disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fe9761eb-ba57-7df2-54e5-7d11c2249b1c.png)

### v-btnとの組み合わせ

`left`および`right`プロパティを指定するとv-btn内のアイコンの表示位置を調整できます。

**left**

```vue
<v-btn color="primary" class="ma-2">
  <v-icon left>mdi-check-circle</v-icon>
  Accept
</v-btn>
<!-- left無し -->
<v-btn color="primary" class="ma-2">
  <v-icon>mdi-check-circle</v-icon>
  Accept
</v-btn>
```

**right**

```vue
<v-btn color="primary" class="ma-2">
  Accept
  <v-icon right>mdi-check-circle</v-icon>
</v-btn>
<!-- right無し -->
<v-btn color="primary" class="ma-2">
  Accept
  <v-icon>mdi-check-circle</v-icon>
</v-btn>
```

**disabled**

```vue
<v-btn color="primary" class="ma-2" disabled>
  Accept
  <v-icon right disabled>mdi-check-circle</v-icon>
</v-btn>
```

![icon-botton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9affdd88-cc33-c828-be0d-93ca27768bb8.png)


# [Images] (https://vuetifyjs.com/en/components/images)

## Props

### VImg

* [VImg] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VImg/VImg.ts)
* [VResponsive] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VResponsive/VResponsive.ts)
* [Measurable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/measurable/index.ts)

```text
VImg  ---- VResponsive ---- Measurable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VImg**       |alt            |string           |undefined |                            | |
|               |contain        |boolean          |false     |                            | |
|               |eager          |boolean          |false     |                            | |
|               |gradient       |string           |undefined |                            | |
|               |lazy-src       |string           |undefined |                            | |
|               |options        |object           |{}        |                            |{root: undefined, rootMargin: undefined, threshold: undefined} |
|               |position       |string           |'center center'|                       |'center center' |
|               |sizes          |string           |undefined |                            | |
|               |src            |string or object |undefined |                            |'' |
|               |srcset         |string           |undefined |                            | |
|               |transition     |boolean or string|'fade-transition'|                     |'fade-transition' |
|**VResponsive**|aspect-ratio   |string or number |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 |                            | |

## 実装例

## Slots

placeholder

> Slot for image placeholder
> 画像プレースホルダーのスロット