我已经构建了一个引导菜单,现在我想使用Yii2 Nav小部件来重现它。因此,这是初始状态:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">BrandLogo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" aria-expanded="true">
<ul class="nav navbar-nav">
<li>
<a href="#1" class="current">simple menu</a>
</li>
<li class="dropdown">
<a href="#4">dropdown menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#2">Submenu#1</a>
</li>
<li>
<a href="#3">Submenu#2</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group has-feedback search">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>
</div>
</div>
</nav>
现在,我想使用Nav小部件做相同的菜单。这是代码:
NavBar::begin([
'brandLabel' => 'BrandLogo',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse',
],
]);
$menuItems = [
[
'label' => 'simple menu',
'url' => ['#1']
],
[
'label' => 'dropdown menu',
'url' => ['#4'],
'items' => [
[
'label' => 'Submenu#1',
'url' => ['#1'],
],
[
'label' => 'Submenu#2',
'url' => ['#2'],
],
]
],
[
'label' => '
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group has-feedback search">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>',
'encode' => false,
'url' => false,
],
];
if (count($menuItems)) {
echo Nav::widget([
'options' => ['class' => 'navbar-nav'],
'items' => $menuItems,
]);
}
NavBar::end();
问题在于结果不相等。我发现了一些问题:
答案 0 :(得分:1)
这是因为您没有遵循实际的HTML结构,因此您需要在contextlib
之后而不是在@contextmanager
内添加表单,但是该表单应该是{ {1}},如果您查看定义
ul
和 NavBar的li
调用被视为 导航栏。您可以使用NavBar
之类的小部件,也可以使用\yii\bootstrap\begin()
构建此类内容。
因此,只需在调用\yii\bootstrap\end()
之后和调用yii\bootstrap\Nav
之前将表单移到\yii\widgets\Menu
之外。
您可以使用$items
自定义或删除类或与链接相关的任何其他属性
Nav::widget()
如果您希望完全删除类名NavBar::end()
,则可能必须通过扩展窗口小部件来覆盖linkOptions
,因为默认情况下它是作为bootstrap类添加的,因此您只需复制<?php
NavBar::begin([
'brandLabel' => 'BrandLogo',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse',
],
]);
$menuItems = [
[
'label' => 'simple menu',
'url' => ['#1']
],
[
'label' => 'dropdown menu',
'url' => ['#4'],
'linkOptions' => [
'class' => 'my-class',
'data' => [
'toggle' => ''
]
],
'items' => [
[
'label' => 'Submenu#1',
'url' => ['#1'],
],
[
'label' => 'Submenu#2',
'url' => ['#2'],
],
]
],
];
if( count($menuItems) ){
echo Nav::widget([
'options' => ['class' => 'navbar-nav'],
'items' => $menuItems,
]);
}
?>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group has-feedback search">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>
<?php
NavBar::end();
到扩展类中,并注释掉行dropdown-toggle
,该行在那里添加了类,然后从yii\bootstrap\Nav::renderItems()
更改要调用renderItems()
的{{1}}到Html::addCssClass ( $linkOptions , [ 'widget' => 'dropdown-toggle' ] );
在您的namespace
中添加以下类,或者如果您打算将其复制到其他地方,请更新代码中的名称空间
Nav