Question

此问题与ES6 Web组件（与Polymer 2.0兼容）有关，称为vaadin-context-menu版本3.0.0-alpha1。

在下面的屏幕截图中，我希望paper-item标记为＆＃34;退出＆＃34;看起来与标有＆＃34;编辑个人资料＆＃34;的纸质项目相同和＆＃34;偏好。＆＃34;

具体来说，当没有被徘徊时，我希望这三个人都有：

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>

Answer 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应用于所选项{}

- 以纸张菜单为中心的项目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;
  }
}

Answer 2

Here is one solution绕过以前所选项目的自动突出显示。 It is taken from the documentation here

jsBin | source

https://jsbin.com/muwapaweke/1/edit?html,output

<!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>

如何设置vaadin-context-menu的样式？

2 个答案: