vuetifyでtabを作る　（メモ）

vuetifyでタブを作った際、少々手こずったので、メモしておきます。

まずはtemplate。

<template>
<v-app id="app">
 <v-container fluid class="ml-10">
 
   <v-row justify="center" class="mt-10 mr-15">
     <v-col cols="9">
     <v-sheet height="250px" color="rgb(255, 255, 255, 0.2)" rounded="lg">

      <v-container fluid>
        <v-row no-gutters>
          <v-col cols="12">

            <v-tabs active-class="font-weight-bold white--text" v-model="tab" background-color="transparent" color="transparent">
              <v-tab class="white--text"> 社員クチコミ、年収</v-tab>
              <v-tab class="white--text">求人情報</v-tab>
            </v-tabs>

            <v-divider class="my-5" color="white"></v-divider>

            <v-tabs-items v-model="tab" id="tab-items">

              <v-tab-item transition="none">

                  <v-row>

                    <v-col cols="8">
                      <v-card-text>
                        <v-text-field outlined value="社名で検索する" background-color="white" color="blue-grey darken-1"></v-text-field>
                      </v-card-text>
                    </v-col>

                    <v-col cols="4" class="mt-5">
                      <v-card-text class="white--text">
                        業界から探す
                      </v-card-text>
                    </v-col>
                    
                  </v-row>
     
              </v-tab-item>

              <v-tab-item transition="none">
                  <v-row class="mt-4" no-gutters>

                    <v-col cols="3" align-self="center" class="ml-5">
                      <v-select :items="items" label="職種を選ぶ" outlined background-color="white"></v-select>
                    </v-col>

                    <v-col cols="3">
                      <v-select :items="items" label="勤務地を選ぶ" outlined  background-color="white"></v-select>
                    </v-col>

                    <v-col cols="3">
                      <v-select :items="items" label="総合評価" outlined  background-color="white"></v-select>
                    </v-col>

                    <v-col cols="1" class="ml-5">
                      <v-btn x-large color="white" class="gray--text">
                        search
                      </v-btn>
                    </v-col>


                    
                  </v-row>
              </v-tab-item>

            </v-tabs-items>

          </v-col>
        </v-row>
      </v-container>

     </v-sheet>
     </v-col>
   </v-row>


 </v-container>
</v-app>
</template>

次はscriptとstyle。

<script>
export default {
 name: "topBar",
 data: () => ({
   tab: null,
   items: [
     '1',
     '2'
   ]
 }),
};
</script>

<style scoped>
#app {
 background: linear-gradient(45deg, #076bb7, #1e98db);
}

#tab-items {
 background-color: transparent;
}
</style>

ポイントはv-tab-itemの下にCardを置かないことです。こうしないと、背景を透明にすることができません。そしてstyleでv-tab-itemにtransparentを指定することで背景が白のv-tab-itemを実現することができます。