blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Style tabs component

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-05 16:47:55 +02:00 committed by Francesco Siddi
parent c3d0e71439
commit 30b734712c
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/app/src/components/TabsWrapper.vue
View File

@ -8,38 +8,45 @@ provide("selectedTitle", selectedTitle);
</script>
<template>
<div>
<nav>
<ul class="tabs-header">
<li
v-for="title in tabTitles"
:key="title"
class="tab-item"
:class="{ selected: selectedTitle === title }"
:class="{ active: selectedTitle === title }"
@click="selectedTitle = title"
>
{{ title }}
</li>
</ul>
<slot />
</div>
</nav>
</template>
<style scoped>
nav {
margin: var(--spacer-sm) 0;
}
.tabs-header {
list-style: none;
padding: 0;
margin: 0;
align-items: center;
display: flex;
justify-content: space-between;
gap: 5px;
gap: var(--spacer);
list-style: none;
}
.tab-item {
flex: 1;
padding: 5px 0;
border-bottom: var(--border-width) solid transparent;
color: var(--color-text-hint);
cursor: pointer;
padding: var(--spacer-sm) 0;
transition: border-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
user-select: none;
}
.tab-item.selected {
border-bottom: 1px solid white;
.tab-item:hover,
.tab-item.active {
border-color: var(--color-text);
color: var(--color-text);
}
</style>