Merge pull request #533 from danice/v2-dev

Tabs with Icons

Author: wuda-io

sass/components/_tabs.scss

@@ -44,8 +44,7 @@
 
   position: relative;
   overflow-x: auto;
-  overflow-y: hidden;
-  height: 48px;
+  overflow-y: hidden;  
   width: 100%;
   background-color: var(--md-sys-color-surface);
   margin: 0 auto;
@@ -56,11 +55,21 @@
     list-style-type: none;
     display: inline-block;
     text-align: center;
-    line-height: 48px;
-    height: 48px;
+    line-height: 48px;    
     padding: 0;
     margin: 0;
 
+    i.material-icons {
+      position: relative;
+      top: 8px;      
+      vertical-align: middle;        
+    }
+
+    span {
+      height: 24px;
+      line-height: 20px;
+    }
+
     a {
       &.active {
         background-color: transparent;
@@ -83,9 +92,11 @@
       }
 
       color: var(--md-sys-color-on-surface-variant);
-      display: block;
+      display: flex;
+      flex-direction: column;  
       width: 100%;
       height: 100%;
+      min-height: 48px;  //needed for only-icons tabs
       padding: 0 24px;
       font-size: 14px;
       text-overflow: ellipsis;
@@ -112,6 +123,21 @@
     will-change: left, right;
     border-radius: 3px 3px 0 0;
   }
+  
+  &.tabs-horizontal .tab { 
+    height: 48px;
+
+    a {
+      display: block;
+    }
+   
+    i.material-icons {
+      padding: 0 4px;
+      position: relative;      
+      top: -2px;            
+      vertical-align: middle;    
+    }
+  }
 }
 
 /* Fixed Sidenav hide on smaller */

src/tabs.ts

@@ -131,8 +131,16 @@ export class Tabs extends Component<TabsOptions> {
   }
 
   _handleTabClick = (e: MouseEvent) => {
-    const tabLink = e.target as HTMLAnchorElement;
-    const tab = tabLink.parentElement;
+    let tabLink = e.target as HTMLAnchorElement;
+
+    if (!tabLink)
+      return;
+    var tab = tabLink.parentElement;  
+    while (tab && !tab.classList.contains('tab')) {
+      tabLink = tabLink.parentElement as HTMLAnchorElement;
+      tab = tab.parentElement;
+    }
+    
     // Handle click on tab link only
     if (!tabLink || !tab.classList.contains('tab')) return;
     // is disabled?