如何在Vaadin7的菜单中设置大图标？

Question

我正在玩这个 Valo theme 样本。在其中，当浏览器屏幕完全打开时，我看到菜单项是小图标，后面有一些单行文本。行。当我使浏览器屏幕更窄时，菜单项的外观正在发生变化。现在我看到更大的图标，下面有一行文字。我怎么能从原点看到这样的样子？似乎这种行为与所谓的“响应式”设计有关。这是一件很酷的事情，但在这种特殊情况下，我想更精确地处理它。

提前致谢。

Answer 1

最简单的方法是在导入 Valo 主题的主题中通过 CSS 修改样式。菜单项图标是字体图标，所以你可以通过CSS增加font-size。使用 Firefox 检查 Valo 主题演示的样式，我发现以下 CSS 用于响应式放大图标：

.tests-valo .v-ui.valo-menu-responsive[width-range~="801px-1100px"] .valo-menu-part .valo-menu-item {
    font-size: 26px;
    ...
}

有关响应能力的更多信息，请参阅 Vaadin docs。

编辑根据评论：标题的新行由 display 样式完成。

.tests-valo .v-ui.valo-menu-responsive[width-range~="801px-1100px"] .valo-menu-part .valo-menu-item [class*="caption"] {
    display: block;
    ...
}

Answer 2

看来我可以找到如何实现我需要的东西。实际上这是一个带有 css 选择器的游戏。就我而言，我必须执行以下操作：

.v-ui[width-range~="551px-"]
{
  .valo-menu-item
  { 

    .valo-menu-item-wrap
    {
      .v-icon
      {
        display: block;
        /*
          Add anything u need...
        */
      }

      .valo-menu-item-caption
      {
        display: block;
        /*
          Add anything u need...
        */
      }
    }
  }
}

如何在Vaadin7的菜单中设置大图标？

How to set large icons in menu in Vaadin7?

vaadin

vaadin7

vaadin-valo-theme