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

【问题标题】：How to set a data atributte with yii2 menu widget uikit如何使用 yii2 菜单小部件 uikit 设置数据属性
【发布时间】：2015-05-22 22:09:08
【问题描述】：

我正在使用 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>

提前致谢。

【问题讨论】：

标签： php drop-down-menu widget uikit yii2

【解决方案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' => ''
],
    ]);
    ?>

【讨论】：

是的，我已经尝试过了，但它不起作用。不是关于属性和值类型的。是我发布的全名。

【解决方案2】：

我认为这就是添加数据属性的方法，在其他 Yii2 地方也可以使用相同的方法。因此，您指定键“数据”，然后添加一个仅包含属性名称的数组（不使用“数据”作为前缀。您可以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']
]);

【讨论】：