将 class 添加到 Yii2 Bootstrap4 Nav 小部件中的子菜单容器
Add class to a submenu container in Yii2 Bootstrap4 Nav widget
我在 Yii2 中使用 Nav 小部件。我有一个下拉菜单作为导航菜单的一部分,但下拉菜单很长并且超出了页面底部并且不会滚动。为了解决这个问题,我试图将 pre-scrollable
class 添加到子菜单容器中。尽我所能,我似乎无法让它发挥作用。
在 $Items
public 属性 下导航小部件 (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-nav) 的 Yii 手册中说:
dropDownOptions: array, optional, the HTML options that will passed to
the yii\bootstrap\Dropdown widget.
我还查看了下拉小部件 (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-dropdown) 的手册页。
我的导航小部件代码如下:
echo Nav::widget([
'options' => ['class' => 'navbar-nav ml-auto'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
[
'label' => 'Dropdown menu',
//'dropDownOptions' => ['options' => ['class' => 'pre-scrollable']],
//'dropDownOptions' => ['class' => 'pre-scrollable'],
//'dropDownOptions' => ['submenuOptions' => ['class' => 'pre-scrollable']],
//'submenuOptions' => ['class' => 'pre-scrollable'],
//'submenuOptions' => ['options' => ['class' => 'pre-scrollable']],
//'submenuOptions' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
//'dropDownOptions' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
//'submenuOptions' => ['submenuOptions' => ['class' => 'pre-scrollable']],
//'options' => ['submenuOptions' => ['class' => 'pre-scrollable']],
//'options' => ['class' => 'pre-scrollable'],
//'options' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
'items' => [
['label' => 'Dropdown menu item 1', 'url' => '#'],
['label' => 'Dropdown menu item 2', 'url' => '#'],
...
],
],
['label' => 'Contact', 'url' => ['/site/contact']],
],
]);
注释掉的行是我尝试过的一些不同方式'pass the HTML options to the yii\bootstrap\Dropdown widget'(按绝望程度递增的顺序)。
有人能帮我纠正一下吗?
感谢期待!
选项 dropDownOptions
在 Yii 版本 2.0.11.2 和 Bootstrap v3.3.7 上测试成功:
'dropDownOptions' => ['class' => 'pre-scrollable'],
结果是附加 class 个标签包含的子菜单项
<ul id="w4" class="pre-scrollable dropdown-menu">
如果您使用的是 yii2-bootstrap4
- 该选项显然重命名为 dropdownOptions
。
请参阅来源中的 Nav::renderDropdown()
:
/**
* Renders the given items as a dropdown.
* This method is called to create sub-menus.
* @param array $items the given items. Please refer to [[Dropdown::items]] for the array structure.
* @param array $parentItem the parent item information. Please refer to [[items]] for the structure of this array.
* @return string the rendering result.
* @throws \Exception
*/
protected function renderDropdown($items, $parentItem)
{
/** @var Widget $dropdownClass */
$dropdownClass = $this->dropdownClass;
return $dropdownClass::widget([
'options' => ArrayHelper::getValue($parentItem, 'dropdownOptions', []),
'items' => $items,
'encodeLabels' => $this->encodeLabels,
'clientOptions' => false,
'view' => $this->getView(),
]);
}
我在 Yii2 中使用 Nav 小部件。我有一个下拉菜单作为导航菜单的一部分,但下拉菜单很长并且超出了页面底部并且不会滚动。为了解决这个问题,我试图将 pre-scrollable
class 添加到子菜单容器中。尽我所能,我似乎无法让它发挥作用。
在 $Items
public 属性 下导航小部件 (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-nav) 的 Yii 手册中说:
dropDownOptions: array, optional, the HTML options that will passed to the yii\bootstrap\Dropdown widget.
我还查看了下拉小部件 (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-dropdown) 的手册页。
我的导航小部件代码如下:
echo Nav::widget([
'options' => ['class' => 'navbar-nav ml-auto'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
[
'label' => 'Dropdown menu',
//'dropDownOptions' => ['options' => ['class' => 'pre-scrollable']],
//'dropDownOptions' => ['class' => 'pre-scrollable'],
//'dropDownOptions' => ['submenuOptions' => ['class' => 'pre-scrollable']],
//'submenuOptions' => ['class' => 'pre-scrollable'],
//'submenuOptions' => ['options' => ['class' => 'pre-scrollable']],
//'submenuOptions' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
//'dropDownOptions' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
//'submenuOptions' => ['submenuOptions' => ['class' => 'pre-scrollable']],
//'options' => ['submenuOptions' => ['class' => 'pre-scrollable']],
//'options' => ['class' => 'pre-scrollable'],
//'options' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
'items' => [
['label' => 'Dropdown menu item 1', 'url' => '#'],
['label' => 'Dropdown menu item 2', 'url' => '#'],
...
],
],
['label' => 'Contact', 'url' => ['/site/contact']],
],
]);
注释掉的行是我尝试过的一些不同方式'pass the HTML options to the yii\bootstrap\Dropdown widget'(按绝望程度递增的顺序)。
有人能帮我纠正一下吗?
感谢期待!
选项 dropDownOptions
在 Yii 版本 2.0.11.2 和 Bootstrap v3.3.7 上测试成功:
'dropDownOptions' => ['class' => 'pre-scrollable'],
结果是附加 class 个标签包含的子菜单项
<ul id="w4" class="pre-scrollable dropdown-menu">
如果您使用的是 yii2-bootstrap4
- 该选项显然重命名为 dropdownOptions
。
请参阅来源中的 Nav::renderDropdown()
:
/**
* Renders the given items as a dropdown.
* This method is called to create sub-menus.
* @param array $items the given items. Please refer to [[Dropdown::items]] for the array structure.
* @param array $parentItem the parent item information. Please refer to [[items]] for the structure of this array.
* @return string the rendering result.
* @throws \Exception
*/
protected function renderDropdown($items, $parentItem)
{
/** @var Widget $dropdownClass */
$dropdownClass = $this->dropdownClass;
return $dropdownClass::widget([
'options' => ArrayHelper::getValue($parentItem, 'dropdownOptions', []),
'items' => $items,
'encodeLabels' => $this->encodeLabels,
'clientOptions' => false,
'view' => $this->getView(),
]);
}