文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在上下文菜单中添加样式？

问如何在上下文菜单中添加样式？
EN

Stack Overflow用户

提问于 2017-06-27 01:07:44

回答 2查看 763关注 0票数 1

这个问题是关于名为ES6版本3.0.0-字母1的vaadin-context-menu web组件(与高分子2.0兼容)。

在下面的屏幕截图中，我希望标记为"Logout“的paper-item与标有"Edit”和“Preferences”的纸质项目相同。

具体来说，当我不徘徊的时候，我希望这三个人都有：

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

这是我的密码。

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

polymer

web-component

polymer-2.0

vaadin-core-elements

回答 2

Stack Overflow用户

发布于 2017-06-27 04:45:05

从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

-纸-菜单-选定-项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;
  }
}

票数 1

Stack Overflow用户

发布于 2017-07-08 19:31:19

这里有一个解决方案，它绕过以前选择的项的自动高亮显示。它摘自这里的文档。。

jsBin x- 来源

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44770895

复制

相似问题

问如何在上下文菜单中添加样式？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在上下文菜单中添加样式？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在上下文菜单中添加样式？
EN