listMenu 菜单列表

listMenu 是展示垂直的可展开菜单树形结构。

XML 元素

listMenu

Java 类

JmixListMenu

概览

List menu

基本用法

在 MainView 中，使用了 listMenu，以及 drawerToggle 和 drawerLayout。

通过 listMenu 可以自定义主视图、管理菜单项以及使用自定义样式。

与其他可视化组件一样，也可以用在任意视图中。

下面是在 XML 中使用的示例：

<listMenu id="listMenu"/>

通过 Java 也可以添加该组件：

@ViewComponent
private VerticalLayout navigation;
@Autowired
private UiComponents uiComponents;
@Autowired
private ApplicationContext applicationContext;

@Subscribe
public void onInit(final InitEvent event) {
    JmixListMenu listMenu = uiComponents.create(JmixListMenu.class);

    MenuConfigListMenuItemProvider itemProvider =
            applicationContext.getBean(MenuConfigListMenuItemProvider.class);
    listMenu.setMenuItemProvider(itemProvider);
    navigation.add(listMenu);

    itemProvider.load();
}

菜单配置

loadMenuConfig 属性控制 listMenu 是否从 MenuConfig 类加载菜单结构。默认值为 true，即组件会从 menu.xml 文件加载菜单结构。

菜单项也可以通过 JmixListMenu 实例以编程的方式创建，示例：

@Route("")
@ViewController("MainView")
@ViewDescriptor("main-view.xml")
public class MainView extends StandardMainView {

    @ViewComponent
    private JmixListMenu menu;

    @Subscribe
    public void onInit(final InitEvent event) {
        ListMenu.MenuBarItem rootItem = new ListMenu.MenuBarItem("help")
                .withTitle("Help")
                .withPrefixComponent(VaadinIcon.QUESTION.create()); (1)
        ListMenu.MenuItem subItemNews = new ListMenu.MenuItem("news")
                .withTitle("News")
                .withClickHandler(  (2)
                        item -> {
                            notifications.create("News menu item clicked")
                                    .show();
                        }
                );
        rootItem.addChildItem(subItemNews);
        ListMenu.MenuSeparatorItem sep =
                new ListMenu.MenuSeparatorItem("separator"); (3)
        rootItem.addChildItem(sep);
        ListMenu.MenuItem subItemBlog = new ListMenu.MenuItem("blog")
                .withTitle("Blog");
        rootItem.addChildItem(subItemBlog);
        menu.addMenuItem(rootItem);
    }
}
1 创建带图标的菜单项。
2 创建使用 clickHandler 的菜单项。
3 创建一个分隔符。

菜单项徽标

使用 themeNames 属性配置一个或多个样式。

样式版本

使用 themeNames 属性可以设置组件的样式。

样式 描述 支持的主题

toggle-reverse

菜单展开/收缩状态的标记会移到父节点的右侧

Aura, Lumo

XML 属性

下面是 listMenu 的特殊属性：

名称 描述 默认值

loadMenuConfig

loadMenuConfig 属性控制是否从 菜单配置 加载菜单结构。默认值为 true，即组件会从 MenuConfig 文件加载菜单结构。如果需要使用其他的菜单 provider，需要先设置该属性为 false。

true

下面是 listMenu 支持的其他通用属性：

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

事件和处理器

下面是 listMenu 支持的通用事件：

AttachEvent - DetachEvent