文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用yii2菜单小工具uikit设置数据属性

问如何使用yii2菜单小工具uikit设置数据属性
EN

Stack Overflow用户

提问于 2015-05-23 06:09:08

回答 2查看 2.2K关注 0票数 1

我正在和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>

提前谢谢。

uikit

yii2

php

drop-down-menu

widget

回答 2

Stack Overflow用户

发布于 2015-06-11 00:22:19

你有没有试过像下面这样添加“选项”？

<?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' => ''
],
    ]);
    ?>

票数 1

Stack Overflow用户

发布于 2018-03-05 09:23:56

我认为这就是添加数据属性的方法，同样的方法也适用于其他Yii2位置。因此，您可以指定键'data‘，然后添加一个仅包含属性名称的数组(没有使用'data’作为前缀)。你可以使用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']
]);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30406551

复制

相似问题

问如何使用yii2菜单小工具uikit设置数据属性
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用yii2菜单小工具uikit设置数据属性EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用yii2菜单小工具uikit设置数据属性
EN