vaadin-side-nav-item 仅在菜单折叠时显示图标

Question

我正在使用 Vaadin 24。 我使用侧面菜单，并在按下汉堡图标时使用“DrawerToggle”显示/隐藏菜单项。效果很好。

DrawerToggle toggle = new DrawerToggle();
    
SideNav nav = createSideNav();

SideNavItems 是这样创建的：

SideNavItem item = new SideNavItem(label);
item.setPrefixComponent(icon);

如前所述，这很好用。但我的目标是仅在抽屉折叠时才隐藏标签。我希望即使抽屉折叠起来，图标也保持可见。因此，即使折叠起来，抽屉也应该保持可见，宽度可能为 60px，并且仍然显示图标。

有什么办法可以实现这个目标吗？

我尝试了很多 CSS，但我认为它会干扰 Vaadin 内置的打开和关闭抽屉的机制。

谢谢， 托尔斯滕

Answer 1

是的，不，目前根本不支持这一点。抽屉可以打开或关闭，没有任何中间状态。

您需要为 AppLayout 和 SideNav 实现您自己的仅图标状态。

AppLayout 抽屉的宽度可通过 css 属性

--vaadin-app-layout-drawer-width

进行配置，因此这是解决方案的关键之一。不幸的是，SideNav 确实不容易用 css 隐藏项目标签，所以你最好用 Java 来处理它。