1

vaadin-context-menu这个问题是关于名为3.0.0-alpha1的 ES6 Web 组件（与 Polymer 2.0 兼容） 。

在下面的屏幕截图中，我希望paper-item标有“注销”的标签看起来与标有“编辑配置文件”和“首选项”的纸质项目相同。

将鼠标悬停在菜单项上

具体来说，当不悬停时，我希望这三个都具有：

paper-item {
  background-color: white;
  font-weight: normal;
}

这是我的代码。

我的-el.html 
<vaadin-context-menu selector="button" open-on="click" close-on="none">
  <template>
    <style>
      paper-item {
        cursor: pointer;
        --paper-item-focused: {     /* Doesn't seem to work */
          background-color: white;  /* Doesn't seem to work */
          font-weight: normal;      /* Doesn't seem to work */
        };
      }
      paper-item {                  /* Doesn't seem to work */
        background-color: white;    /* Doesn't seem to work */
        font-weight: normal;        /* Doesn't seem to work */
      }
      paper-item:hover {
        background-color: var(--app-primary-color);
        color: white;
      }
    </style>
    <paper-listbox>
      <paper-item>Edit Profile</paper-item>
      <paper-item>Preferences</paper-item>
      <hr />
      <paper-item>Logout</paper-item>
    </paper-listbox>
  </template>
  <button>Click Me</button>
</vaadin-context-menu>
4

2 回答 2

1

查看https://vaadin.com/elements/-/element/vaadin-context-menu#demos似乎自定义样式是当前焦点（关于键盘），这就是灰色。

https://github.com/vaadin/vaadin-context-menu/issues/55 引用风格说它是纸质菜单功能，粗体代表最后选择的选项。

这是一个特点。有一种解决方法可以使其不可见：

<paper-menu selected-class="not-defined">...</paper-menu>

https://www.webcomponents.org/element/PolymerElements/paper-menu

--paper-menu-selected-item Mixin 应用于所选项目 {}

--paper-menu-focused-item Mixin 应用于焦点项目 {}

见https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-a-custom-properties-api-to-style-an-element

用于使用自定义属性。

paper-menu {
  --paper-menu-selected-item: {
    background-color: white;
    font-weight: normal;  
  }
  --paper-menu-focused-item: {
    background-color: var(--app-primary-color);
    color: white;
  }
}
于 2017-06-27T04:45:05.140 回答
0

这是一种绕过自动突出显示先前选择的项目的解决方案。它取自此处的文档。

jsBin | 资源

https://jsbin.com/muwapaweke/1/edit?html，输出 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>


<vaadin-context-menu>
  <template>
    <style>
      .my-menu {
        padding: 8px 0;
        background: #fff;
      }

      .my-menu-item {
        display: block;
        padding: 8px 24px;
        text-decoration: none;
        color: #000;
      }

      .my-menu-item:hover {
        background: #eee;
      }
    </style>
    <div class="my-menu">
      <a href="#" class="my-menu-item">First menu item</a>
      <a href="#" class="my-menu-item">Second menu item</a>
    </div>
  </template>

  <p>
    This paragraph has a context menu built using basic HTML elements
    and global CSS styles.
  </p>
</vaadin-context-menu>
</body>
</html>
于 2017-07-08T19:31:19.223 回答