diff --git a/CHANGELOG.md b/CHANGELOG.md index 48de053..d04877d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/Tabs.php b/src/Tabs.php index 49c3bec..56dc639 100644 --- a/src/Tabs.php +++ b/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, + ]); + } /** diff --git a/tests/TabsTest.php b/tests/TabsTest.php index f652843..bae30b9 100644 --- a/tests/TabsTest.php +++ b/tests/TabsTest.php @@ -171,7 +171,7 @@ class TabsTest extends TestCase ], [ 'label' => 'Tab 2', - 'content' => 'some content' + 'content' => 'some content' ], [ 'label' => 'Tab 3', @@ -182,7 +182,7 @@ class TabsTest extends TestCase 'content' => 'some content' ] ] - ]); + ]); $this->assertNotContains('
  • Tab 1
  • ', $html); $this->assertContains('
  • Tab 2
  • ', $html); } @@ -214,4 +214,31 @@ class TabsTest extends TestCase ]); $this->assertContains('
  • Tab 3
  • ', $html); } + + public function testTemplate() + { + $html = Tabs::widget([ + 'template' => '
    {headers}
    {panes}
    ', + 'id' => 'mytab', + 'items' => [ + [ + 'label' => 'Tab 1', + 'content' => 'Content 1' + ], + [ + 'label' => 'Tab 2', + 'content' => 'Content 2' + ], + ] + ]); + + $expected = <<
    +
    Content 1
    +
    Content 2
    +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $html); + } }