ヘッダーに表示されるタブのインジケーターを実装 (#6803)

* Implemente indicators on headers

* 微調整
This commit is contained in:
Xeltica 2020-11-07 12:31:23 +09:00 committed by GitHub
parent c6dd932a0b
commit 1fcfd8e645
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 2 deletions

View File

@ -9,6 +9,7 @@
<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
<span v-if="tab.title" class="text">{{ tab.title }}</span>
<Fa class="indicator" v-if="tab.indicate" :icon="faCircle"/>
</div>
</template>
<template v-else>
@ -27,7 +28,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import { faChevronLeft, faCircle } from '@fortawesome/free-solid-svg-icons';
export default defineComponent({
props: {
@ -45,7 +46,7 @@ export default defineComponent({
return {
canBack: false,
height: 0,
faChevronLeft
faChevronLeft, faCircle
};
},
@ -131,6 +132,17 @@ export default defineComponent({
overflow: hidden;
text-overflow: ellipsis;
padding: 0 16px;
position: relative;
> .indicator {
position: absolute;
top: initial;
right: 8px;
top: 8px;
color: var(--indicator);
font-size: 12px;
animation: blink 1s infinite;
}
> .icon + .text {
margin-left: 8px;