heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2023-02-20 17:28:09 +09:00
parent b055f516c0
commit b5fa8767da
1 changed files with 29 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View file

@ -1,23 +1,33 @@
<template> <template>
<div ref="el" :class="$style.tabs" @wheel="onTabWheel"> <div ref="el" :class="$style.tabs" @wheel="onTabWheel">
<div :class="$style.tabsInner"> <div :class="$style.tabsInner">
<button v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title" <button
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]" v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"> class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
<div :class="$style.tabInner"> @mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i> >
<div v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)" <div :class="$style.tabInner">
:class="$style.tabTitle">{{ t.title }}</div> <i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
<Transition v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave" <div
@after-leave="afterLeave"> v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div> :class="$style.tabTitle"
</Transition> >
{{ t.title }}
</div> </div>
</button> <Transition
</div> v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave"
<div ref="tabHighlightEl" @after-leave="afterLeave"
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"></div> >
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
</Transition>
</div>
</button>
</div> </div>
<div
ref="tabHighlightEl"
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
></div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -206,8 +216,8 @@ onUnmounted(() => {
align-items: center; align-items: center;
} }
.tabIcon+.tabTitle { .tabIcon + .tabTitle {
padding-left: 8px; padding-left: 4px;
} }
.tabTitle { .tabTitle {