MINOR: Fix/bimdata tabs component (#259)

* add possibility to know the active tab * add example for use custom tabs with colors
bimdata · Dec 6, 2022 · 5572755 · 5572755
1 parent 76af33c
commit 5572755
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 25 deletions.
diff --git a/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue b/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
@@ -23,7 +23,7 @@
         :style="{ minWidth: tabWidth }"
         @click="onTabClick(tab)"
       >
-        <slot name="tab" :tab="tab">
+        <slot name="tab" :tab="tab" :active="tab.id === activeTab.id">
           {{ tab.label }}
         </slot>
       </li>

diff --git a/src/BIMDataComponents/BIMDataTabs/_BIMDataTabs.scss b/src/BIMDataComponents/BIMDataTabs/_BIMDataTabs.scss
@@ -24,12 +24,12 @@
     scroll-behavior: smooth;
 
     &__tab {
+      padding: 0;
       box-sizing: border-box;
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
-      padding: 0 calc(var(--spacing-unit) / 2);
       text-align: center;
       color: var(--color-granite);
       cursor: pointer;

diff --git a/src/web/views/Components/Tabs/CustomTabColors.vue b/src/web/views/Components/Tabs/CustomTabColors.vue
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <BIMDataText component="h3" color="color-primary" margin="15px 0 10px">
+      Or custom tabs with add colors :
+    </BIMDataText>
+
+    <div class="m-b-12">Result:</div>
+    <div class="m-b-12">
+      <BIMDataTabs
+        :tabs="tabsData"
+        width="100%"
+        height="40px"
+        tabSize="220px"
+        :selected="0"
+      >
+        <template #tab="{ tab, active }">
+          <div
+            :style="{
+              width: '100%',
+              height: '100%',
+              backgroundColor: 'white',
+            }"
+          >
+            <div
+              :style="{
+                backgroundColor: active ? tab.color + '1A' : '',
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }"
+            >
+              <BIMDataIcon :name="tab.icon" size="xs" margin="0 6px 0 0" />
+              <span>{{ tab.text }}</span>
+              <div
+                :style="{
+                  margin: '0 6px',
+                  backgroundColor: active ? tab.color : '#F0F5FF',
+                  width: '15px',
+                  height: '15px',
+                  fontSize: '9px',
+                  fontWeight: 'bold',
+                  color: active ? 'white' : 'var(--color-granite)',
+                  borderRadius: '2px',
+                  lineHeight: '15px',
+                }"
+              >
+                1
+              </div>
+            </div>
+          </div>
+        </template>
+      </BIMDataTabs>
+    </div>
+    <div class="m-b-12">
+      <Code language="xml">
+        <pre>
+            &lt;BIMDataTabs
+              :tabs="[
+                { id: 0, text: 'IFC', icon: 'ifc', color: '#205DBD' },
+                { id: 1, text: 'BCF', icon: 'bcf', color: '#f9c72c' },
+                { id: 2, text: 'My Account', icon: 'user', color: '#44BCFF' },
+                { id: 3, text: 'Settings', icon: 'settings', color: '#FF1E1E' },
+              ]"
+              width="100%"
+              height="40px"
+              tabSize="220px"
+              :selected="0"
+            &gt;
+              &lt;template #tab="{ tab, active }" &gt;
+                &lt;div
+                  :style="{
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'white',
+                  }"
+                &gt;
+                  &lt;div
+                    :style="{
+                      backgroundColor: active ? tab.color + '1A' : '',
+                      width: '100%',
+                      height: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }"
+                  &gt;
+                    &lt;BIMDataIcon :name="tab.icon" size="xs" margin="0 6px 0 0" /&gt;
+                    &lt;span&gt;{{ "{{ tab.text }" + "}" }}&lt;/span&gt;
+                    &lt;div
+                      :style="{
+                        margin: '0 6px',
+                        backgroundColor: active ? tab.color : '#F0F5FF',
+                        width: '15px',
+                        height: '15px',
+                        fontSize: '9px',
+                        fontWeight: 'bold',
+                        color: active ? 'white' : 'var(--color-granite)',
+                        borderRadius: '2px',
+                        lineHeight: '15px',
+                      }"
+                    &gt;
+                      1
+                    &lt;/div&gt;
+                  &lt;/div&gt;
+                &lt;/div&gt;
+              &lt;/template&gt;
+            &lt;/BIMDataTabs&gt;
+          </pre
+        >
+      </Code>
+    </div>
+  </div>
+</template>
+
+<script>
+import Code from "../../Elements/Code/Code.vue";
+// components
+import BIMDataIcon from "../../../../BIMDataComponents/BIMDataIcon/BIMDataIcon.vue";
+import BIMDataTabs from "../../../../BIMDataComponents/BIMDataTabs/BIMDataTabs.vue";
+import BIMDataText from "../../../../../src/BIMDataComponents/BIMDataText/BIMDataText.vue";
+
+export default {
+  components: {
+    Code,
+    BIMDataIcon,
+    BIMDataTabs,
+    BIMDataText,
+  },
+  data() {
+    return {
+      tabsData: [
+        { id: 0, text: "IFC", icon: "ifc", color: "#205DBD" },
+        { id: 1, text: "BCF", icon: "bcf", color: "#f9c72c" },
+        { id: 2, text: "My Account", icon: "user", color: "#44BCFF" },
+        { id: 3, text: "Settings", icon: "settings", color: "#FF1E1E" },
+      ],
+    };
+  },
+};
+</script>
diff --git a/src/web/views/Components/Tabs/Tabs.vue b/src/web/views/Components/Tabs/Tabs.vue
@@ -86,7 +86,28 @@
         <a href="https://v3.vuejs.org/guide/component-slots.html#scoped-slots">
           scoped slots </a
         >.<br />
-        Below is an example of how to do this.
+        Below is 2 examples of how to do this.
+      </div>
+
+      <div class="m-b-12">Result:</div>
+      <div class="m-b-12">
+        <BIMDataTabs
+          :tabs="[
+            { id: 0, text: 'IFC', icon: 'ifc' },
+            { id: 1, text: 'BCF', icon: 'bcf' },
+            { id: 2, text: 'My Account', icon: 'user' },
+            { id: 3, text: 'Settings', icon: 'settings' },
+          ]"
+          width="100%"
+          height="40px"
+          tabSize="220px"
+          :selected="0"
+        >
+          <template #tab="{ tab }">
+            <BIMDataIcon :name="tab.icon" size="xs" margin="0 6px 0 0" />
+            <span>{{ tab.text }}</span>
+          </template>
+        </BIMDataTabs>
       </div>
       <div class="m-b-12">
         <Code language="xml">
@@ -111,28 +132,8 @@
           </pre>
         </Code>
       </div>
-      <div class="m-b-12">
-        Result:
-      </div>
-      <div class="m-b-12">
-        <BIMDataTabs
-          :tabs="[
-            { id: 0, text: 'IFC', icon: 'ifc' },
-            { id: 1, text: 'BCF', icon: 'bcf' },
-            { id: 2, text: 'My Account', icon: 'user' },
-            { id: 3, text: 'Settings', icon: 'settings' },
-          ]"
-          width="100%"
-          height="40px"
-          tabSize="220px"
-          :selected="0"
-        >
-          <template #tab="{ tab }">
-            <BIMDataIcon :name="tab.icon" size="xs" margin="0 6px 0 0" />
-            <span>{{ tab.text }}</span>
-          </template>
-        </BIMDataTabs>
-      </div>
+
+      <CustomTabColors />
     </div>
   </main>
 </template>
@@ -149,6 +150,8 @@ import BIMDataText from "../../../../../src/BIMDataComponents/BIMDataText/BIMDat
 import Code from "../../Elements/Code/Code.vue";
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 
+import CustomTabColors from "./CustomTabColors.vue";
+
 export default {
   components: {
     BIMDataIcon,
@@ -158,6 +161,7 @@ export default {
     BIMDataText,
     Code,
     ComponentCode,
+    CustomTabColors,
   },
   data() {
     return {