Browse Source

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

tags/2.0.11
Mohamed Abdel-Monem Hussein 3 years ago committed by GitHub
parent
commit
7184f373ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      CHANGELOG.md
  2. 15
      src/Tabs.php
  3. 27
      tests/TabsTest.php

2
CHANGELOG.md

@ -4,7 +4,7 @@ Yii Framework 2 bootstrap extension Change Log
2.0.11 under development 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 2.0.10 April 23, 2019

15
src/Tabs.php

@ -130,6 +130,12 @@ class Tabs extends Widget
*/ */
public $dropdownClass = 'yii\bootstrap\Dropdown'; 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. * Initializes the widget.
@ -220,7 +226,14 @@ class Tabs extends Widget
$headers[] = Html::tag('li', $header, $headerOptions); $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,
]);
} }
/** /**

27
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); $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);
}
} }

Loading…
Cancel
Save