Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 1x | <template>
<v-tabs
v-model="current"
class="tabs-classic mb-4"
show-arrows
slider-color="primary"
slider-size="2"
bg-color="transparent"
>
<v-tab
v-for="i in items"
:key="i.name"
:value="i.name"
:to="{ name: i.name }"
replace
variant="text"
>
{{ t(i.label) }}
</v-tab>
</v-tabs>
</template>
<script setup lang="ts">
// region Dependency Injection
import {useRoute, useRouter} from 'vue-router'
import {computed} from 'vue'
import { useI18n } from 'vue-i18n'
// endregion Dependency Injection
// region Component Injection
// endregion Component Injection
// region interface
// endregion interface
// region constants
const route = useRoute()
const router = useRouter()
const { t } = useI18n()
// endregion constants
// region props
// endregion props
// region variable
// endregion variable
// region properties
const items = [
{label: 'ui.page.profile.root.title', name: 'Profile', },
// {label: 'ui.page.profile.identity.root.title', name: 'ProfileIdentity', },
{label: 'ui.page.profile.address.root.title', name: 'ProfileAddress', },
{label: 'ui.page.profile.contact.root.title', name: 'ProfileContact', },
{label: 'ui.page.profile.login.root.title', name: 'ProfileMe', },
// {label: '(暫定)スキル', name: 'ProfileSkill', },
// {label: '(暫定)最寄り駅', name: 'ProfileStation', },
]
// endregion properties
// region emits
// endregion emits
// region validator
// endregion validator
// region methods
const current = computed({
get: () => (route.name as string) ?? '',
set: (name: string) => {
if (name && name !== route.name) router.push({name})
}
})
// endregion methods
// region export
// endregion export
</script>
<style scoped>
/* 全体の高さと下罫線 */
.tabs-classic {
--v-tabs-height: 44px; /* 好みで 40–48px くらい */
border-bottom: 1px solid rgba(0,0,0,.12);
}
/* ダークテーマでも罫線が見えるように */
:global(.v-theme--dark) .tabs-classic {
border-bottom: 1px solid rgba(255,255,255,.16);
}
/* タブを“ピル型 → 角丸なし”＆隣接させる */
.tabs-classic :deep(.v-tab) {
border-radius: 0 !important; /* 角丸をなくす */
margin: 0 !important; /* タブ間の隙間をなくす */
text-transform: none; /* 大文字化オフ */
}
/* 選択タブの見え方を少し強調（任意） */
.tabs-classic :deep(.v-tab.v-tab--selected) {
font-weight: 600;
}
/* ホバー時（任意・薄い背景） */
.tabs-classic :deep(.v-tab:hover) {
background: color-mix(in srgb, currentColor 6%, transparent);
}
</style>
|