Vaadin - 如何自定义 MenuBar 使其看起来像链接
Vaadin - How to customize MenuBar to look like links
我知道这是在 CSS 中完成的(好吧 SCSS),但我正在努力研究如何设置它的样式以使 MenuBar
看起来像文本。我同意 MenuItems
的现状,我只希望 MenuBar
本身看起来像 link。一个很好的例子是 Whosebug 顶部的帮助 link,就在屏幕顶部搜索框的左侧..
默认情况下,在 Vaadin 中它看起来像按钮,当我单击它们时,按钮会突出显示并具有如下所示的额外边框颜色:
我想删除所有这些,让它看起来像您点击的 link。 MenuItem 样式很棒,但我只是想让它看起来像文本。我喜欢向下的胡萝卜,以及 MenuItems 的样式,我只是想更改 MenuBar。下面是一个例子:
我一直在摆弄 css 有一段时间了,就是找不到合适的样式。任何帮助将不胜感激。同样,我只是想删除 MenuBar
的样式,仅此而已。到目前为止我有:
.myMenuBar
{
border: none;
background-image: none;
background-color: myBackgroundColor;
box-shadow: none;
}
问题是我仍然在努力处理一些样式元素:
例如,当我点击时,我仍然有一个蓝色突出显示的按钮。弹出菜单也以我的自定义颜色为背景。我在两个元素之间也有一条黑色分隔线。虽然很难看到 MenuBar
上方和下方有一条白色和灰色的细线以显示一些深度。
更新:添加了一些 css 改进,但我还有很长的路要走。
即使有了问题下方评论中的链接,我仍然难以找到解决方案。最终我 运行 进入了 Class ValoTheme
并发现我可以用一行代码做我想做的事情。事实上,它比我计划的要好,感谢主题设计师!
menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);
我知道这是在 CSS 中完成的(好吧 SCSS),但我正在努力研究如何设置它的样式以使 MenuBar
看起来像文本。我同意 MenuItems
的现状,我只希望 MenuBar
本身看起来像 link。一个很好的例子是 Whosebug 顶部的帮助 link,就在屏幕顶部搜索框的左侧..
默认情况下,在 Vaadin 中它看起来像按钮,当我单击它们时,按钮会突出显示并具有如下所示的额外边框颜色:
我想删除所有这些,让它看起来像您点击的 link。 MenuItem 样式很棒,但我只是想让它看起来像文本。我喜欢向下的胡萝卜,以及 MenuItems 的样式,我只是想更改 MenuBar。下面是一个例子:
我一直在摆弄 css 有一段时间了,就是找不到合适的样式。任何帮助将不胜感激。同样,我只是想删除 MenuBar
的样式,仅此而已。到目前为止我有:
.myMenuBar
{
border: none;
background-image: none;
background-color: myBackgroundColor;
box-shadow: none;
}
问题是我仍然在努力处理一些样式元素:
例如,当我点击时,我仍然有一个蓝色突出显示的按钮。弹出菜单也以我的自定义颜色为背景。我在两个元素之间也有一条黑色分隔线。虽然很难看到 MenuBar
上方和下方有一条白色和灰色的细线以显示一些深度。
更新:添加了一些 css 改进,但我还有很长的路要走。
即使有了问题下方评论中的链接,我仍然难以找到解决方案。最终我 运行 进入了 Class ValoTheme
并发现我可以用一行代码做我想做的事情。事实上,它比我计划的要好,感谢主题设计师!
menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);