Vaadin - 如何自定义MenuBar看起来像链接

我明白，这是在CSS（以及SCSS）完成的，但我正在努力如何设计它的样子，使MenuBar看起来像文本。我很满意MenuItems，因为他们是，我只想要MenuBar本身看起来像链接。一个很好的例子是StackOverflow顶部的帮助链接，位于屏幕顶部搜索框的左侧。Vaadin - 如何自定义MenuBar看起来像链接

默认情况下，Vaadin看起来像按钮，当我点击按钮时，按钮高亮显示，有这种额外的边框颜色，如下图所示：

enter image description here

我想删除这一切，只是使它看起来像你点击一个链接。 MenuItem样式非常棒，但我只是想让它看起来像文本。我喜欢下来的胡萝卜，以及MenuItems的样式，它只是我想改变的MenuBar。下面是一个例子：

enter image description here

我一直在用的CSS现在有点瞎搞，我只是不能得到正确的风格。任何帮助将不胜感激。再次，我只是想删除MenuBar的样式，没有别的。到目前为止，我有：

.myMenuBar 
    { 
    border: none; 
    background-image: none; 
    background-color: myBackgroundColor; 
    box-shadow: none; 
    }

的问题是，仍然有许多风格元素，我挣扎：

enter image description here

例如，我仍然有一个蓝色的，当我强调按钮单击。此外，弹出式菜单是背景到我的自定义颜色。这两个元素之间还有一条黑色的分隔线。虽然很难看到在MenuBar上方和下方有一条细白的灰线，以显示某种深度。

更新：增加了一些CSS改进，但我仍然是一个方法。

来源

2015-07-21 Stephane Grenier

为什么不开始修改从更接近这种风格的东西一般的瓦洛？请参阅https://demo.vaadin.com/valo-theme/和https://github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/themes以获取灵感，https：// vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.variables可能的开关。 TBH我发现这个“为我的设计打造一个CSS”并不是一个好的问题。 – cfrick

这就是我试过的。我也看过：https：//vaadin.com/api/valo/即使那样我仍然无法弄清楚。然而，我确实找到了一个解决方案，我将在第二个帖子中发布这个解决方案，可以在代码中完成！ –

即使在下面的评论中的链接，我仍然在努力寻找解决方案。最后我碰到类ValoTheme，发现我可以用一行代码完成我想要的。事实上，它比我计划对主题设计师如此赞叹的事情要好得多！

menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);

来源

2015-07-22 02:52:20

Vaadin - 如何自定义MenuBar看起来像链接

回答

相关问题