Roo/bootstrap/panel/Tabs.js

[roojs1] / Roo / bootstrap / panel / Tabs.js

diff --git a/Roo/bootstrap/panel/Tabs.js b/Roo/bootstrap/panel/Tabs.js
index 95f2e0a..7367c6c 100644 (file)
--- a/Roo/bootstrap/panel/Tabs.js
+++ b/Roo/bootstrap/panel/Tabs.js
@@ -226,9 +226,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * Adds an existing {@link Roo.TabPanelItem}.
      * @param {Roo.TabPanelItem} item The TabPanelItem to add
      */
-    addTabItem : function(item){
+    addTabItem : function(item)
+    {
         this.items[item.id] = item;
         this.items.push(item);
+        this.autoSizeTabs();
       //  if(this.resizeTabs){
     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
   //         this.autoSizeTabs();
@@ -310,7 +312,8 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * @param {String/Number} id The id or index of the TabPanelItem to activate.
      * @return {Roo.TabPanelItem} The TabPanelItem.
      */
-    activate : function(id){
+    activate : function(id)
+    {
         var tab = this.items[id];
         if(!tab){
             return null;
@@ -376,12 +379,22 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     /**
      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
      */
-    autoSizeTabs : function(){
+    autoSizeTabs : function()
+    {
         var count = this.items.length;
         var vcount = count - this.hiddenCount;
+        
+        if (vcount < 2) {
+            this.stripEl.hide();
+        } else {
+            this.stripEl.show();
+        }
+        
         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
             return;
         }
+        
+        
         var w = Math.max(this.el.getWidth() - this.cpad, 10);
         var availWidth = Math.floor(w / vcount);
         var b = this.stripBody;
@@ -441,7 +454,9 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     createStrip : function(container)
     {
         var strip = document.createElement("nav");
-        strip.className = "navbar navbar-default"; //"x-tabs-wrap";
+        strip.className = Roo.bootstrap.version == 4 ?
+            "navbar-light bg-light" : 
+            "navbar navbar-default"; //"x-tabs-wrap";
         container.appendChild(strip);
         return strip;
     },
@@ -480,7 +495,7 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     createStripElements :  function(stripEl, text, closable, tpl)
     {
         var td = document.createElement("li"); // was td..
-        
+        td.className = 'nav-item';
         
         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
         
@@ -520,12 +535,18 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
             var template = tpl || this.tabTpl || false;
             
             if(!template){
-                
-                template = new Roo.Template(
-                   '<a href="#">' +
-                   '<span unselectable="on"' +
-                            (this.disableTooltips ? '' : ' title="{text}"') +
-                            ' >{text}</span></a>'
+                template =  new Roo.Template(
+                        Roo.bootstrap.version == 4 ? 
+                            (
+                                '<a class="nav-link" href="#" unselectable="on"' +
+                                     (this.disableTooltips ? '' : ' title="{text}"') +
+                                     ' >{text}</a>'
+                            ) : (
+                                '<a class="nav-link" href="#">' +
+                                '<span unselectable="on"' +
+                                         (this.disableTooltips ? '' : ' title="{text}"') +
+                                    ' >{text}</span></a>'
+                            )
                 );
             }