比如我想知道菜单目录展开和收缩来控制其图标,还有菜单项点击事件这些有地方可以订阅吗?
控制图标使用CSS就可以做到,CUBA 侧边栏菜单在展开和收起状态都在不同的css类,通过css类来定义图标就可以了。
确实要监听事件,可以参考WebSideMenu 类:
public class WebSideMenu extends WebAbstractComponent<CubaSideMenu> implements SideMenu {
其中有一段:
public WebSideMenu() {
component = new CubaSideMenu();
component.setBeforeMenuItemTriggeredHandler(menuItem -> {
if (sidePanel != null) {
sidePanel.removeStyleName(HaloTheme.SIDEMENU_PANEL_OPEN);
}
});
component.addAttachListener(this::handleAttach);
}
这个事件是点击菜单后触发,您说的用CSS控制图标,能否给一个简单的示例?
我现在看到图标的HTML是这样的:
<span class="v-icon FontAwesome"></span>
没看到图标的名称是哪里设置的,后台我是通过menu.addAttribute(“icon”, “CHEVRON_RIGHT”);指定的。
现在我怎么通过css跟换成为其他的图标呢?
这里提供一个简单示例:
- 下载CUBA 示例程序: https://github.com/cuba-platform/cuba-petclinic
- 修改项目中的style.scss文件,加入以下代码:
div.c-sidemenu-item-header{
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
:before{
content:"\f067" ;
}
}
div.c-sidemenu-item-header.c-sidemenu-item-header-open{
:before{
content:"\f068" ;
}
}
span.c-sidemenu-item-wrap{
:before{
content: none !important; ;
}
}
位置在:
最终效果:
这里主要是使用了字体图标和 css中的 after before 伪类。
1 个赞
感谢感谢!