Vuetify図鑑 v-tabsの勘所

公式リファレンス。
https://vuetifyjs.com/ja/components/tabs/

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

基本的な使い方

<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-tabs>にv-modelをセットしておく必要はない。
v-modelされていれば、その変数には選択中のvalueが入る。
（この時、アンカーの#は含まない）

v-tabs-items を使ってタブとコンテンツを分離する

<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で同じ変数を見ている必要がある。

タブの初期値

export default {
  data () {
    return {
      model: 'tab-2'
    }
  }
}

v-model が参照する変数に初期値セットしておけば、そのタブが選択された状態から始まる。

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

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

タブ切り替え時のアニメーションを変更する

<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を指定して変更できる。
幾つか試したがフェード以外のトランジションは上手く動いてる感じがしない。
まあ、タブの切り替えでフェードとスライド以外を使うことはないと思うけど。

コンテンツ部分をコンポーネント化する

<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リンクとして扱う

<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も合わせて指定しておく。

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

リンク時の初期値

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

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

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

タブ下のバーの色を変える

<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とかプロパティ作ってくれりゃいいのに。