当前位置: 首页 > 知识库问答 >
问题:

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

姜卜霸
2023-03-14

我使用的导航小部件在Yii2。我有一个下拉框作为导航菜单的一部分,但下拉框很长,超出了页面的底部,不滚动。为了解决这个问题,我尝试将预滚动类添加到子菜单容器中。尽管我尽了最大努力,但似乎还是无法成功。

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

下拉选项:数组,可选,将传递给yii\bootstrap\Dropdown小部件的HTML选项。

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

注释掉的行是我试图“将超文本标记语言选项传递给yii\bootstrap\Dropdown小部件”的一些不同方式(按照越来越绝望的顺序)。

有人能帮我纠正一下吗?

期待中的感谢!

共有1个答案

梁英喆
2023-03-14

选项dropdownpoptions已在Yii 2.0版上成功测试。11.2和引导v3。3.7:

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

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

<ul id="w4" class="pre-scrollable dropdown-menu">

如果您使用的是yii2-bootstrap4,则该选项显然重命名为dropdownpoptions

请参见源代码中的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

 类似资料:
  • 我向每个Wordpress菜单项添加了类,但它们没有出现在代码中。 我的菜单: 我的职能。php包括 所以我有 但是没有我在Wordpress管理菜单中添加的任何类。为什么呢?

  • 我有一个android webview默认文本选择的问题。我想做的是添加一个项目到默认菜单,它出现在webview的文本选择上 我想要的功能是添加一个按钮到左侧的全选。如何做到这一点

  • 问题内容: 无论如何在qtablewidget中添加像按钮一样的内容?但是必须在单元格中显示日期,例如,如果用户双击某个单元格,我是否可以像按钮一样发送信号?谢谢! edititem(): 表触发器: 问题答案: 您有几个问题可以归结为一个…简短答案,是的,您可以向QTableWidget添加按钮- 您可以通过调用setCellWidget将任何窗口小部件添加到表格窗口小部件: 但这听起来并不像您

  • 我在顶部菜单中添加了组件,有一个按钮,这是容器的主要组件。但是单击任何一个按钮或其他组件都没有效果。我怎么才能让它起作用?此外,我已经浏览了一个在顶部菜单中的南方组件的博客。我已经将cn1更新到8.1,它给出了“您的项目库是最新的”,但我仍然不能使用它(setComponentToSideMenuSouth)。我想让组件保持在侧菜单的顶部,那么setComponentToSideMenuNorth

  • 我正在创建一个测验应用程序,需要根据特定问题的选项数量动态显示mcq选项。 例如: 现在按钮的代码如下: 如你所见,我能做的就是“修复”2个按钮。有没有一种方法可以根据特定问题的选项数量动态添加按钮? 我有一个名为

  • 我使用下面的代码将活动类添加到菜单项。该网站是99%使用WooCommerce的Ecomm,我使用产品类别作为顶级导航项目。下面的代码适用于几乎所有项目,除非在产品子类别上处于活动状态。 本质上,我希望顶层导航项被标记为活动类,即使选择了子类别。