Tab component reedit

2026-05-29 23:44:41 +00:00 · 2021-01-30 10:12:33 +01:00
parent cec2450940
commit a5dd0e0d30
7 changed files with 158 additions and 169 deletions
@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <div class="tab-wrapper">
+            <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
+
+                <!--Icon-->
+                <mail-icon v-if="tab.icon === 'email'" class="tab-icon" size="17"/>
+                <link-icon v-if="tab.icon === 'link'" class="tab-icon" size="17"/>
+                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon" size="17"/>
+                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon" size="17"/>
+
+                <!--Title-->
+                <b class="tab-title">{{tab.title}}</b>
+            </div>
+        </div>
+        <slot></slot>
+    </div>
+
+</template>
+
+<script>
+     import {
+        LinkIcon,
+        MailIcon,
+        SmileIcon,
+        FolderIcon } from 'vue-feather-icons'
+
+    export default {
+        name: "TabWrapper",
+        components: {
+            LinkIcon,
+            MailIcon,
+            SmileIcon,
+            FolderIcon
+        },
+        data () {
+            return {
+                tabs: []
+            }
+        },
+        methods: {
+            selectTab(selectedTab) {
+                this.tabs.forEach(tab => {
+                    tab.isActive = tab.title == selectedTab.title
+                })
+            }
+        },
+        mounted () {
+            this.tabs = this.$children
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .tab-wrapper {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 20px;
+        cursor: pointer;
+        align-items: center;
+        background: $light_background;
+        color: $text;
+        border-radius: 8px;
+        overflow: hidden;
+
+        .tab-title {
+            @include font-size(14);
+        }
+
+        .tab {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px;
+
+            &.active {
+                background: $text;
+
+                .tab-title {
+                    color: $light_background;
+                }
+            }
+        }
+
+        .tab-icon {
+            margin-right: 10px;
+            path,
+            circle,
+            line,
+            polyline {
+                color: $theme !important;
+            }
+        }
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+        .tab-wrapper {
+            background: $dark_mode_foreground;
+
+            .tab.active {
+                background: rgba($theme, 0.1);
+
+                .tab-title {
+                    color: $theme;
+                }
+            }
+        }
+    }
+
+</style>