tab disabled state

zombieFox · Jul 24, 2024 · b28fe14 · b28fe14
1 parent 9553995
commit b28fe14
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/component/tab/index.css b/src/component/tab/index.css
@@ -18,6 +18,12 @@
   width: 100%;
 }
 
+.tab-hide-content {
+  grid-template-rows: auto;
+  grid-template-areas:
+    "nav";
+}
+
 .tab-nav {
   background-color: hsl(var(--theme-primary-020));
   border-radius: calc((var(--theme-radius) * 0.01em) + ((var(--tab-size) / 4) * 0.125em));
@@ -28,6 +34,10 @@
   transition: background-color var(--layout-transition-extra-fast);
 }
 
+.disabled .tab-nav {
+  background-color: transparent;
+}
+
 .tab-nav-group {
   flex-grow: 1;
   display: flex;
@@ -44,6 +54,7 @@
 
 .tab-nav-button {
   background-color: transparent;
+  border: 3px solid transparent;
   flex-grow: 1;
   flex-basis: 25%;
   z-index: 2;
@@ -58,7 +69,7 @@
 .tab-nav-button.active {
   background-color: transparent;
   color: hsl(var(--theme-accent-text));
-  transition: background-color var(--layout-duration-01), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
+  transition: background-color var(--layout-duration-01), border-color var(--layout-duration-01), color var(--layout-transition-extra-fast);
 }
 
 .tab.disabled .tab-nav-button {
@@ -67,6 +78,7 @@
 
 .tab.disabled .tab-nav-button.active {
   background-color: hsl(var(--button-background-disabled));
+  border-color: hsl(var(--theme-primary-020));
   color: hsl(var(--button-text-disabled));
 }
 
@@ -95,4 +107,8 @@
 
 .tab-content {
   grid-area: content;
+}
+
+.tab-hide-content .tab-content {
+  display: none;
 }
diff --git a/src/component/tab/index.js b/src/component/tab/index.js
@@ -4,8 +4,9 @@ import { node } from '../../utility/node';
 
 import './index.css';
 
-export const Tab = function({
-  group = []
+export const Tab = function ({
+  hideContent = false,
+  group = [],
 } = {}) {
 
   this.element = {
@@ -92,6 +93,13 @@ export const Tab = function({
 
   this.content = {
     render: () => {
+
+      if (hideContent) {
+
+        this.element.tab.classList.add('tab-hide-content');
+
+      }
+
       group.forEach((item) => {
 
         if (item.active) {
@@ -101,6 +109,7 @@ export const Tab = function({
         }
 
       });
+
     }
   };