Question

我正在创建一个MenuBar，我想让它在有要显示的子元素时显示一个小图标。我以为我可以这样做：

interface ActionHeroResources extends ClientBundle, MenuBar.Resources
{
    @Source("actionhero.css")
    public ActionHeroCSS css();

    @Override
    @Source("agw-dropdown.png")
    ImageResource menuBarSubMenuIcon();
}

private static final ActionHeroResources RESOURCES = GWT.create(ActionHeroResources.class);

MenuBar actionMenu = new MenuBar(true, RESOURCES);

public ActionHero()
{
    actionMenu.addItem("Select", aSelectMenuFullOfOptions);
}

但菜单显示“选择”一词没有图标！我很肯定我的ImageResource工作正常，因为我稍后使用来自同一资源的menuBarSubMenuIcon（）。getURL（），我的图像就像你期望的那样出现。在GWT生成的HTML中，作为子项的MenuBars和具有Commands的项目之间绝对没有区别。我的CSS工作正常。

有什么想法吗？

Answer 1

尝试覆盖.gwt-MenuBar-vertical .subMenuIcon-selected的CSS样式，如下所示：

.gwt-MenuBar-vertical .subMenuIcon-selected {
    background: none;
}

我将它用于我自己选择的项目并且效果很好：

.gwt-MenuBar-vertical .subMenuIcon-selected {
    background: url(images/hand_pointer.png) no-repeat 0px 0px;
}

Answer 2

问题最终是形成子菜单的弹出式面板从父级获取其样式名，但附加了依赖的样式名。我不知道一种预测相关样式名称的方法，因为原始样式名称是混淆的。我通过使用更通用的.gwt-MenuBar弹出式样式名来解决这个问题。这只能起作用，因为我的程序中只有一种样式的弹出菜单 - 如果我想让两个弹出窗口看起来不同，我不知道该怎么做！

希望在以后的gwt版本中，MenuBar样式将更加接近传递给菜单栏的资源，并减少对依赖样式名称的使用。

Answer 3

您只需为子菜单中显示的css规则设置如下：

.subMenuIcon > img {
    /* override gwt sub menu icon */
    width: 6px !important;
    height: 11px !important;
    background: url('your-image-relative-path.png') no-repeat 0px 0px !important;
}

GWT MenuBar.Resources ...被忽略了吗？

3 个答案: