Question

我正在使用yii2和uikit。我正在尝试使用菜单小部件构建一个导航栏，我有这个：

<nav class='uk-navbar'>            
        <?php
        echo Menu::widget([
            'activateItems' => true,
            'activateParents' => true,
            'activeCssClass' => 'uk-active',
            'encodeLabels' => false,
            'items' => [
                ['label' => 'Inicio', 'url' => ['site/index']],
                ['label' => 'Juridico', 'url' => ['juridico/index']],
                ['label' => 'Pagos', 'url' => ['pagos/index']],
                ['label' => 'Universidades', 'url' => ['universidades/index']],
                ['label' => 'Usuarios', 'url' => ['usuarios/index']],
                ['label' => 'Planes', 'options' => ['class' => 'uk-parent', 'data' => 'uk-dropdown'], 'url' => ['#'], 'items' => [
                        ['label' => 'Planes Juridico', 'url' => ['#']],
                        ['label' => 'Planes Universidades', 'url' => ['#']],
                    ]],
                ['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
            ],
            'submenuTemplate' => '<div class="uk-dropdown uk-dropdown-navbar"><ul class="uk-nav uk-nav-navbar">{items}</ul></div>',
            'options' => [ 'class' => 'uk-navbar-nav'],
        ]);
        ?>     
    </nav>

所有我缺少的是这个属性，但我不知道如何设置它'data-uk-dropdown'

我需要这个结果才能让下拉列表工作：

<nav class="uk-navbar">
        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="">Active</a></li>
            <li><a href="">Item</a></li>
            <li class="uk-parent" data-uk-dropdown>
                <a href="">Parent</a>
                <div class="uk-dropdown uk-dropdown-navbar">
                    <ul class="uk-nav uk-nav-navbar">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Another item</a></li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Another item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#">Separated item</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

提前致谢。

Answer 1

您是否尝试添加如下所示的“选项”？

<?php
    echo Menu::widget([
        'activateItems' => true,
        'activateParents' => true,
        'activeCssClass' => 'uk-active',
        'encodeLabels' => false,
        'items' => [
            ['label' => 'Inicio', 'url' => ['site/index']],
            ['label' => 'Juridico', 'url' => ['juridico/index']],
            ['label' => 'Pagos', 'url' => ['pagos/index']],
            ['label' => 'Universidades', 'url' => ['universidades/index']],
            ['label' => 'Usuarios', 'url' => ['usuarios/index']],
            ['label' => 'Planes', 'options' => ['class' => 'uk-parent', 'data' => 'uk-dropdown'], 'url' => ['#'], 'items' => [
                    ['label' => 'Planes Juridico', 'url' => ['#']],
                    ['label' => 'Planes Universidades', 'url' => ['#']],
                ]],
            ['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
        ],
        'submenuTemplate' => '<div class="uk-dropdown uk-dropdown-navbar">    <ul class="uk-nav uk-nav-navbar">{items}</ul></div>',
        'options' => [ 
'class' => 'uk-navbar-nav',
'data-uk-dropdown' => ''
],
    ]);
    ?>

Answer 2

我认为这是你可以添加数据属性的方法，同样的方法可以在其他Yii2地方使用。因此，您需要指定密钥＆＃39;数据＆＃39;然后添加一个只包含属性名称的数组（不要在其前面添加＆＃39;数据＆＃39;。您可以read more about it here。

NavBar::begin([
    'options' => [
        'id' => 'main-nav-bar',
        'class' => 'navbar-inverse',
        'data' => ['my-attribute' => 'myValue'] // This line specifically.
    ],
    'innerContainerOptions' => ['class' => 'container-fluid']
]);

如何使用yii2菜单小部件uikit设置数据属性

2 个答案: