WebSideMenu有相关的事件可以订阅吗?

比如我想知道菜单目录展开和收缩来控制其图标,还有菜单项点击事件这些有地方可以订阅吗?

控制图标使用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跟换成为其他的图标呢?

这里提供一个简单示例:

  1. 下载CUBA 示例程序: https://github.com/cuba-platform/cuba-petclinic
  2. 修改项目中的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; ;
    }
    }

位置在:
image

最终效果:
image

这里主要是使用了字体图标和 css中的 after before 伪类。

1 个赞

感谢感谢!