在 Yii2 Bootstrap4 Nav 小部件中将类添加到子菜单容器答案

【问题标题】：Add class to a submenu container in Yii2 Bootstrap4 Nav widget在 Yii2 Bootstrap4 Nav 小部件中将类添加到子菜单容器
【发布时间】：2021-01-29 17:56:24
【问题描述】：

我在 Yii2 中使用 Nav 小部件。我有一个下拉菜单作为导航菜单的一部分，但下拉菜单很长并且超出了页面底部并且不滚动。为了解决这个问题，我尝试将 pre-scrollable 类添加到子菜单容器中。尽我所能，我似乎无法让它工作。

在导航小部件 (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-nav) 的 Yii 手册中，$Items 公共属性下写道：

dropDownOptions：数组，可选，将传递给的 HTML 选项 yii\bootstrap\Dropdown 小部件。

我还查看了下拉小部件的手册页 (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']],
    ],
]);

注释掉的行是我尝试“将 HTML 选项传递给 yii\bootstrap\Dropdown 小部件”的一些不同方式（以增加绝望的顺序）。

请有人帮我改正吗？

感谢期待！

【问题讨论】：

标签： yii2 yii2-basic-app

【解决方案1】：

选项dropDownOptions在Yii 2.0.11.2版本和Bootstrap v3.3.7上测试成功：

'dropDownOptions' => ['class' => 'pre-scrollable'],

结果是附加类别的标签包含子菜单项

<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(),
    ]);
}

https://github.com/yiisoft/yii2-bootstrap4/blob/219d19fba47b5499f01764789c3cd3ce7306e0f9/src/Nav.php#L207

【讨论】：