![見出し画像](https://assets.st-note.com/production/uploads/images/51694117/rectangle_large_type_2_bfffc99fe946074cb225ed004e272044.png?width=1200)
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を実現することができます。
この記事が気に入ったらサポートをしてみませんか?