yii2 Nav::widget() 和 Menu::widget()

Nav::widget http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html

Menu::widget()  http://www.yiiframework.com/doc-2.0/yii-widgets-menu.html#$items-detail

这两个widget都是显示菜单的,或者说可以这么干,使用之中返现有个很明显的不同:

Nav 的子菜单或者子项目默认使用的ul样式是‘dropdown-menu‘,Menu 默认只用一个display:block。Nav的UL标签的样式要该需要改api才会变,目前我还不知道怎么不改api就可以修改UL标签的class,可以添加,但是原来的dropdown-menu 是在的。

Nav 给子项目添加样式方法

 1                   [
 2                                     ‘label‘ => ‘xx管理‘,
 3                                     ‘url‘ => [‘url0‘],
 4                                     ‘options‘=>[‘class‘=>‘accordion‘],
 5                                     ‘items‘ => [
 6                                         [
 7                                             ‘label‘ => ‘管理xx‘, ‘url‘ => [‘ulr1‘],
 8                                         ],
 9                                         [
10                                             ‘label‘ => ‘添加xx‘, ‘url‘ => [‘url2‘]
11                                         ],
12                                     ],
13                                 ],

在11行后添加

‘dropDownOptions‘=>[‘class‘=>‘nav nav-pills nav-stacked‘],

可以修改子items的ul样式,如图,dropdown-menu还是在的

Menu::widget有个 submenuTemplate 属性,可以通过修改该属性来自定义子项目UL标签的样式

1 echo Menu::widget([
2                                 ‘options‘ => [‘class‘ => ‘nav nav-pills nav-stacked main-menu‘],
3                                 ‘items‘ => $menuItems,
4                                 ‘submenuTemplate‘ => "\n<ul class=‘nav nav-pills nav-stacked‘ role=‘menu‘>\n{items}\n</ul>\n",
5                             ]);

Menu::widget是一定要有‘label‘属性的,不然是会报错的,但是Nav就可以直接在两个子项目间写li标签之类的,看官方文档。

时间: 2024-08-26 20:38:11

yii2 Nav::widget() 和 Menu::widget()的相关文章

18、菜单部件(Menu Widget)

带有鼠标和键盘交互的用于导航的可主题化菜单. 菜单可以用任何有效的标记创建,只要元素有严格的父/子关系且每个条目都有一个锚.最常用的元素是无序列表(<ul>): <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <l

QT+常见控件+tab Widget 和Stacked Widget

首先:这里介绍以下tab Widget 和Stacked Widget 之间的区别和使用的方法: tab Widget控件可以直接的进行切换,Stacked Widget却不可以直接在界面上进行切换,需要第三方的控件来进行支持(按钮).Stacked Widget的具体使用方法如下图: #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> #include <QCo

TextAppearance.Material.Widget.Button.Inverse,Widget.Material.Button.Colored

编译xamarin android项目报错: android:TextAppearance.Material.Widget.Button.Inverse android:Widget.Material.Button.Colored 网上查找的参考帖子: http://jingyan.baidu.com/article/4dc40848b4aac8c8d946f13b.html http://blog.csdn.net/u010499721/article/details/49022183 最终解

ThinkPHP3.2.2 Widget扩展以及widget demo实例

Widget扩展一般用于页面组件的扩展. 先说明Widget被调用的方法,你只需要在你的模板文件中使用这样的语法:{:W("Demo/demo_widget_method",array(5,'thinkphp'))} 系统就会自动去寻找对应的Widget类文件并执行对应的方法. 具体步骤如下: 1.因为是直接在模板中写的{:W("Demo/demo_widget_method",array(5,'thinkphp'))},所以要了解后面的步骤,我们得移步系统的Tem

Yii2 menu navbar nav小部件的使用示例

menu Menu::widget( [ [ 'label' => $menu['name'], 'url' => [$menu['route']], 'items' => [ [ 'label' => $menu['name'], 'url' => [$menu['route']] ], .... ] ], [ 'label' => $menu['name'], 'url' => [$menu['route']], 'items' => [ [ 'labe

05WAB入门-Widget开发

命名规范 实例地址:http://www.arcgis.com/apps/webappviewer/index.html?config=sample-configs/config-demo.json Widget类    Widget.js Widget模板    Widget.html Widget配置    config.json Widget i18n    nls/strings.js Widget style    css/style.css Widget icon    images

v7.widget.SearchView的使用

SearchView出来已经相当久了,现在才拿出来讲,确实感觉有点跟不上时代的脚步,不管了,就当是给自己做个备份,忘记的时候还可以用来参考! 顺便说一下最近的糟糕情况,好像-自从-五一假期过后,就一直没好好工作,更没有好好学习,生活也没有规律,小说.游戏.熬夜-现在回想下真的很恐怖,为什么我会颓废一个月之久呢?我记得我五一假期刚回来的那个星期,我心里是铁了心要玩的,给自己的心理暗示是,从下个星期开始,要好好学习,所以我就毫无愧疚感的玩了一个星期,按理来说第二个星期开始应该会恢复过来,可是,哪有什

jquery ui widget 源代码分析

jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.widget( name, base, prototype ) widget一共同拥有2或3个參数.base为可选. 这里之所以把base放在第二个參数里,主要是由于这样写代码更直观一些.(由于后面的prototype 是个代码很长的大对象). name:第一个參数是一个包括一个命名空间和组件名称的字符

widget jquery 理解

jquery ui 的所有组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,实用它能实现一致的API,创建有状态的插件,而无需关心插件的内部转换. $.widget( name, base, prototype ) widget一共有2或3个参数.base为可选. 这里之所以把base放在第二个参数里,主要是因为这样写代码更直观一些.(因为后面的prototype 是个代码非常长的大对象). name:第一个参数是一个包含一个命名空间和组件名称的字符串