Vuetify図鑑　v-tabsの勘所

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134740/09f04f79-49db-47f8-0ea9-7abfbc852339.png)
公式リファレンス。
https://vuetifyjs.com/ja/components/tabs/

API
https://vuetifyjs.com/ja/api/v-tabs/


# 基本的な使い方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134740/b3c21642-50ac-8883-290f-9e679ff13377.png)

```html
<v-tabs>
  <v-tab href="#tab-1">One</v-tab>
  <v-tab href="#tab-2">Two</v-tab>
  <v-tab href="#tab-3">Three</v-tab>

  <v-tab-item value="tab-1">
  	Tab 1 Content
  </v-tab-item>
  <v-tab-item value="tab-2">
  	Tab 2 Content
  </v-tab-item>
  <v-tab-item value="tab-3">
  	Tab 3 Content
  </v-tab-item>
</v-tabs>
```

一番簡単な書き方は、`<v-tabs>` の中で完結する方法。
`<v-tab>`の`href`アンカーに対応する`value`を持つ<v-tab-item>が表示される。
特に用途がなければ、`<v-tabs>`に`v-model`をセットしておく必要はない。
`v-model`されていれば、その変数には選択中の`value`が入る。
（この時、アンカーの#は含まない）

# v-tabs-items を使ってタブとコンテンツを分離する
```html
<v-tabs v-model="model">
  <v-tab href="#tab-1">One</v-tab>
  <v-tab href="#tab-2">Two</v-tab>
  <v-tab href="#tab-3">Three</v-tab>
</v-tabs>

<v-tabs-items v-model="model">
  <v-tab-item value="tab-1">
    Tab 1 Content
  </v-tab-item>
  <v-tab-item value="tab-2">
    Tab 2 Content
  </v-tab-item>
  <v-tab-item value="tab-3">
    Tab 3 Content
  </v-tab-item>
</v-tabs-items>
```

`<v-tabs-items>`を使うと、タブボタン部の`<v-tabs>`とコンテンツ部で分離することができる。
この場合、`<v-tabs>`と`<v-tabs-items>`はお互いに`v-model`で同じ変数を見ている必要がある。

# タブの初期値
```javascript
export default {
  data () {
    return {
      model: 'tab-2'
    }
  }
}
```
`v-model` が参照する変数に初期値セットしておけば、そのタブが選択された状態から始まる。

もし、コンテンツを分離しない書き方で初期値をセットしたいだけなら、`<v-tabs>`に直接`value`でタブを指定しても構わない。

```html
<v-tabs value="tab-2">
  <v-tab href="#tab-1">One</v-tab>
  <v-tab href="#tab-2">Two</v-tab>
  <v-tab href="#tab-3">Three</v-tab>
  <v-tab-item value="tab-1">
    Tab 1 Content
  </v-tab-item>
  <v-tab-item value="tab-2">
    Tab 2 Content
  </v-tab-item>
  <v-tab-item value="tab-3">
    Tab 3 Content
  </v-tab-item>
</v-tabs>
```

# タブ切り替え時のアニメーションを変更する
```html
<v-tabs>
  <v-tab href="#tab-1">One</v-tab>
  <v-tab href="#tab-2">Two</v-tab>
  <v-tab href="#tab-3">Three</v-tab>
  <v-tab-item value="tab-1" transition="fade-transition">
    Tab 1 Content
  </v-tab-item>
  <v-tab-item value="tab-2" transition="fade-transition">
    Tab 2 Content
  </v-tab-item>
  <v-tab-item value="tab-3" transition="fade-transition">
    Tab 3 Content
  </v-tab-item>
</v-tabs>
```
タブ切り替え時のアニメーション（トランジション）は`<v-tab-item`に`transition`を指定して変更できる。
幾つか試したがフェード以外のトランジションは上手く動いてる感じがしない。
まあ、タブの切り替えでフェードとスライド以外を使うことはないと思うけど。


# コンテンツ部分をコンポーネント化する
```html
<v-tabs>
  <v-tab href="#tab-1">One</v-tab>
  <v-tab href="#tab-2">Two</v-tab>
  <v-tab href="#tab-3">Three</v-tab>

  <v-tab-item value="tab-1">
    <MyComponent1 />
  </v-tab-item>
  <v-tab-item value="tab-2">
    <MyComponent2 />
  </v-tab-item>
  <v-tab-item value="tab-3">
    <MyComponent3 />
  </v-tab-item>
</v-tabs>
```
タブコンテンツをコンポーネント化した時、そのタブが選択されて初めてコンポーネントは初期化〜マウントされる。
ただし、別のタブに移動したからといって、マウントされたコンポーネントがdestroyされることはない。

# routerリンクとして扱う
```html
<v-tabs>
  <v-tab to="/" exact>Home</v-tab>
  <v-tab to="/app">App</v-tab>
  <v-tab to="/settings">Settings</v-tab>
</v-tabs>
```

タブボタンをvue-routerのリンクとして扱いたい時は、`href`ではなく`to`を使う。
`to`は`<router-link>`と同じ書き方ができる。
https://router.vuejs.org/ja/api/#to

nuxtを使っている場合は`nuxt`も合わせて指定しておく。

```html
<v-tab nuxt to="/app">
```

### リンク時の初期値
タブをリンクとして使った場合、遷移先のページにも同じタブが表示されていると思うが、`v-model`や`value`で初期値を設定しなくても、`route`から判断して勝手に選択済みになってくれる。
逆に、ルートと異なるタブを選択済みにさせようとしても上手くいかない。

この時、注意しないといけないのが、アクティブ判定は`to`に対して前方一致で決まるという点。
これを防ぐために、不都合があるタブには`exact`を指定しておく必要がある。

上記の例だと、１つ目のタブに`exact`がない状態で`/settings`に遷移した場合、１つ目と３つ目のタブが２つともアクティブになってしまう。
`/settings`, `/settings/account`, `/settings/notice` のようなリンクを作る場合は注意が必要。

# タブ下のバーの色を変える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134740/d34e5cfe-09e0-3a10-e650-54c1836e6882.png)

```html
<v-tabs>
  <v-tab href="#tab-1">One</v-tab>
  <v-tab href="#tab-2">Two</v-tab>
  <v-tab href="#tab-3">Three</v-tab>

  <v-tabs-slider color="orange" />
</v-tabs>
```

`<v-tabs>`の中に`<v-tabs-slider>`を作り、そこに`color`を指定する。
`<v-tabs-slider>`には`color`以外のプロパティは無いらしい。

じゃあ、`<v-tabs>`にslider-colorとかプロパティ作ってくれりゃいいのに。