Fix #261: Support of custom templates for Tab headers and panes

CHANGELOG.md

@@ -4,7 +4,7 @@ Yii Framework 2 bootstrap extension Change Log
 2.0.11 under development
 ------------------------
 
-- no changes in this release.
+- Enh #261: Support of custom templates for Tab headers and panes (mmonem)
 
 
 2.0.10 April 23, 2019

src/Tabs.php

@@ -130,6 +130,12 @@ class Tabs extends Widget
      */
     public $dropdownClass = 'yii\bootstrap\Dropdown';
 
+    /**
+     * @var string template for layout for the headers and the panes. Can be helpful, for example, if a left
+     * vertical tabs are required. Defaults to `{headers}{panes}`
+     * @since 2.0.11
+     */
+    public $template = '{headers}{panes}';
 
     /**
      * Initializes the widget.
@@ -220,7 +226,14 @@ class Tabs extends Widget
             $headers[] = Html::tag('li', $header, $headerOptions);
         }
 
-        return Html::tag('ul', implode("\n", $headers), $this->options) . $this->renderPanes($panes);
+        $headersHtml = Html::tag('ul', implode("\n", $headers), $this->options);
+        $panesHtml = $this->renderPanes($panes);
+
+        return strtr($this->template, [
+            '{headers}' => $headersHtml,
+            '{panes}' => $panesHtml,
+        ]);
+
     }
 
     /**

tests/TabsTest.php

@@ -214,4 +214,31 @@ class TabsTest extends TestCase
         ]);
         $this->assertContains('<li class="active"><a href="#mytab-tab2" data-toggle="tab">Tab 3</a></li>', $html);
     }
+
+    public function testTemplate()
+    {
+        $html = Tabs::widget([
+            'template' => '<div class="container-class"><div class="headers-class">{headers}</div><div class="panes-class">{panes}</div></div>',
+            'id' => 'mytab',
+            'items' => [
+                [
+                    'label' => 'Tab 1',
+                    'content' => 'Content 1'
+                ],
+                [
+                    'label' => 'Tab 2',
+                    'content' => 'Content 2'
+                ],
+            ]
+        ]);
+
+        $expected = <<<EXPECTED
+<div class="container-class"><div class="headers-class"><ul id="mytab" class="nav nav-tabs"><li class="active"><a href="#mytab-tab0" data-toggle="tab">Tab 1</a></li>
+<li><a href="#mytab-tab1" data-toggle="tab">Tab 2</a></li></ul></div><div class="panes-class">
+<div class="tab-content"><div id="mytab-tab0" class="tab-pane active">Content 1</div>
+<div id="mytab-tab1" class="tab-pane">Content 2</div></div></div></div>
+EXPECTED;
+
+        $this->assertEqualsWithoutLE($expected, $html);
+    }
 }