zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

use close icon component in Tabs

Browse Source
This commit is contained in:
lana-k
2020-12-22 16:30:14 +01:00
parent 9fca9b29dc
commit 02091dddb7
2 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Tabs.vue
View File

@@ -13,19 +13,7 @@
<span v-else class="tab-untitled">{{ tab.tempName }}</span> <span v-else class="tab-untitled">{{ tab.tempName }}</span>
</div> </div>
<div> <div>
<svg <close-icon class="close-icon" :size="10" @click="closeTab(index)"/>
class="close-icon"
@click.stop="closeTab(index)"
width="10"
height="10"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
fill="#A2B1C6"/>
</svg>
</div> </div>
</div> </div>
</div> </div>
@@ -49,10 +37,12 @@
<script> <script>
import Tab from '@/components/Tab' import Tab from '@/components/Tab'
import CloseIcon from '@/components/svg/close'
export default { export default {
components: { components: {
Tab Tab,
CloseIcon
}, },
data () { data () {
return { return {
@@ -130,10 +120,6 @@ export default {
margin-left: 5px; margin-left: 5px;
} }
.close-icon:hover path {
fill: var(--color-text-base);
cursor: pointer;
}
#start-guide { #start-guide {
position: absolute; position: absolute;
top: 50%; top: 50%;

26
src/components/svg/close.vue
View File

@@ -1,12 +1,30 @@
<template> <template>
<svg @click.stop="$emit('click')" class="icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#A2B1C6"/> @click.stop="$emit('click')"
class="icon"
:width="size"
:height="size"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
fill="#A2B1C6"
/>
</svg> </svg>
</template> </template>
<script> <script>
export default { export default {
name: 'CloseIcon' name: 'CloseIcon',
props: {
size: {
type: Number,
required: false,
default: 14
}
}
} }
</script> </script>
@@ -15,6 +33,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
.icon:hover path { .icon:hover path {
fill: var(--color-text-active); fill: var(--color-text-base);
} }
</style> </style>