Fixes #1881: Improved `yii\bootstrap\NavBar` with `containerOptions`, `innerContainerOptions` and `renderInnerContainer`

CHANGELOG.md

@@ -10,6 +10,7 @@ Yii Framework 2 bootstrap extension Change Log
 - Enh #1553: Only add navbar-default class to NavBar when no other class is specified (cebe)
 - Enh #1562: Added `yii\bootstrap\Tabs::linkOptions` (kartik-v)
 - Enh #1601: Added support for tagName and encodeLabel parameters in ButtonDropdown (omnilight)
+- Enh #1881: Improved `yii\bootstrap\NavBar` with `containerOptions`, `innerContainerOptions` and `renderInnerContainer` (creocoder)
 - Chg #1459: Update Collapse to use bootstrap 3 classes (tonydspaniard)
 - Chg #1820: Update Progress to use bootstrap 3 markup (samdark)
 

NavBar.php

@@ -8,6 +8,7 @@
 namespace yii\bootstrap;
 
 use Yii;
+use yii\helpers\ArrayHelper;
 use yii\helpers\Html;
 
 /**
@@ -33,11 +34,24 @@ use yii\helpers\Html;
  *
  * @see http://getbootstrap.com/components/#navbar
  * @author Antonio Ramirez <amigo.cobos@gmail.com>
+ * @author Alexander Kochetov <creocoder@gmail.com>
  * @since 2.0
  */
 class NavBar extends Widget
 {
 	/**
+	 * @var array the HTML attributes for the widget container tag. The following special options are recognized:
+	 *
+	 * - tag: string, defaults to "nav", the name of the container tag
+	 */
+	public $options = [];
+	/**
+	 * @var array the HTML attributes for the container tag. The following special options are recognized:
+	 *
+	 * - tag: string, defaults to "div", the name of the container tag
+	 */
+	public $containerOptions = [];
+	/**
 	 * @var string the text of the brand. Note that this is not HTML-encoded.
 	 * @see http://getbootstrap.com/components/#navbar
 	 */
@@ -56,10 +70,14 @@ class NavBar extends Widget
 	 */
 	public $screenReaderToggleText = 'Toggle navigation';
 	/**
-	 * @var bool whether the navbar content should be included in a `container` div which adds left and right padding.
-	 * Set this to false for a 100% width navbar.
+	 * @var bool whether the navbar content should be included in an inner div container which by default
+	 * adds left and right padding. Set this to false for a 100% width navbar.
+	 */
+	public $renderInnerContainer = true;
+	/**
+	 * @var array the HTML attributes of the inner container.
 	 */
-	public $padded = true;
+	public $innerContainerOptions = [];
 
 	/**
 	 * Initializes the widget.
@@ -69,27 +87,37 @@ class NavBar extends Widget
 		parent::init();
 		$this->clientOptions = false;
 		Html::addCssClass($this->options, 'navbar');
-		if ($this->options['class'] == 'navbar') {
+		if ($this->options['class'] === 'navbar') {
 			Html::addCssClass($this->options, 'navbar-default');
 		}
 		Html::addCssClass($this->brandOptions, 'navbar-brand');
 		if (empty($this->options['role'])) {
 			$this->options['role'] = 'navigation';
 		}
-
-		echo Html::beginTag('nav', $this->options);
-		if ($this->padded) {
-			echo Html::beginTag('div', ['class' => 'container']);
+		$options = $this->options;
+		$tag = ArrayHelper::remove($options, 'tag', 'nav');
+		echo Html::beginTag($tag, $options);
+		if ($this->renderInnerContainer) {
+			if (!isset($this->innerContainerOptions['class'])) {
+				Html::addCssClass($this->innerContainerOptions, 'container');
+			}
+			echo Html::beginTag('div', $this->innerContainerOptions);
 		}
-
 		echo Html::beginTag('div', ['class' => 'navbar-header']);
+		if (!isset($this->containerOptions['id'])) {
+			$this->containerOptions['id'] = "{$this->options['id']}-collapse";
+		}
 		echo $this->renderToggleButton();
 		if ($this->brandLabel !== null) {
+			Html::addCssClass($this->brandOptions, 'navbar-brand');
 			echo Html::a($this->brandLabel, $this->brandUrl === null ? Yii::$app->homeUrl : $this->brandUrl, $this->brandOptions);
 		}
 		echo Html::endTag('div');
-
-		echo Html::beginTag('div', ['class' => "collapse navbar-collapse navbar-{$this->options['id']}-collapse"]);
+		Html::addCssClass($this->containerOptions, 'collapse');
+		Html::addCssClass($this->containerOptions, 'navbar-collapse');
+		$options = $this->containerOptions;
+		$tag = ArrayHelper::remove($options, 'tag', 'div');
+		echo Html::beginTag($tag, $options);
 	}
 
 	/**
@@ -97,12 +125,13 @@ class NavBar extends Widget
 	 */
 	public function run()
 	{
-
-		echo Html::endTag('div');
-		if ($this->padded) {
+		$tag = ArrayHelper::remove($this->containerOptions, 'tag', 'div');
+		echo Html::endTag($tag);
+		if ($this->renderInnerContainer) {
 			echo Html::endTag('div');
 		}
-		echo Html::endTag('nav');
+		$tag = ArrayHelper::remove($this->options, 'tag', 'nav');
+		echo Html::endTag($tag, $this->options);
 		BootstrapPluginAsset::register($this->getView());
 	}
 
@@ -113,11 +142,11 @@ class NavBar extends Widget
 	protected function renderToggleButton()
 	{
 		$bar = Html::tag('span', '', ['class' => 'icon-bar']);
-		$screenReader = '<span class="sr-only">'.$this->screenReaderToggleText.'</span>';
+		$screenReader = "<span class=\"sr-only\">{$this->screenReaderToggleText}</span>";
 		return Html::button("{$screenReader}\n{$bar}\n{$bar}\n{$bar}", [
 			'class' => 'navbar-toggle',
 			'data-toggle' => 'collapse',
-			'data-target' => ".navbar-{$this->options['id']}-collapse",
+			'data-target' => "#{$this->containerOptions['id']}",
 		]);
 	}
 }