Polymer 1.x：格式化 <paper-menu-button>

Question

我有纸按钮元素...

This JSFiddle shows the target result I seek for the button hover effect。（即，整个按钮填满工具栏的整个高度，并且没有边距，需要在悬停时突出显示）。

...但我需要纸质菜单按钮元素。

上面使用的是<paper-button>。但是我真的很想用一个<paper-menu-button>。 This JSFiddle is the best attempt I have so far。（请注意按钮上方和下方的白色 space — 在悬停时不突出显示。）

问题

Please help me format the second JSFiddle to look (on hover) like the first JSFiddle. (I.e., no white space. Fills entire height of toolbar.)

Please provide a working JSFiddle or JSBin in your answer.

注意： 我在许多 CSS 样式属性之前使用了 x 字符作为注释属性的快速方法我已经尝试但没有没用。

代码

...这个效果就是目标...http://jsfiddle.net/L3bqphwe/2/

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-toolbar *:last-child {
        margin-right: -8px;
    }  
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <x-element></x-element>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style>
      :host {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          height: 100%;
        };
        border-left: 1px solid white;
        height: 100%;
      }
      paper-menu-button {
        margin: 0;
        padding: 0;
        height: 100%;
        xborder-left: 1px solid var(--paper-grey-600);
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          @xapply(--height-100%);
          xheight: 100%;
        };        
      }
      paper-button:hover {
        background: white;
        color: black;
        font-weight: bold;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        color: white;
        height: 100%;
        border-radius: 0;
        margin:0;
        -o-transition      : .25s;
        -ms-transition     : .25s;
        -moz-transition    : .25s;
        -webkit-transition : .25s;
        transition         : .25s;
      }
    </style>
  <paper-button>Button</paper-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

...我到目前为止...需要帮助... http://jsfiddle.net/L3bqphwe/3/

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-toolbar *:last-child {
        margin-right: -5px;
    }  
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <x-element></x-element>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style>
      :host {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          height: 100%;
        };
        border-left: 1px solid white;
        height: 100%;
      }
      paper-menu-button {
        margin: 0;
        padding: 0;
        height: 100%;
        xborder-left: 1px solid var(--paper-grey-600);
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          @xapply(--height-100%);
          xheight: 100%;
        };        
      }
      paper-button:hover {
        background: white;
        color: black;
        font-weight: bold;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        color: white;
        height: 100%;
        border-radius: 0;
        margin:0;
        -o-transition      : .25s;
        -ms-transition     : .25s;
        -moz-transition    : .25s;
        -webkit-transition : .25s;
        transition         : .25s;
      }
    </style>
    <paper-menu-button>
      <paper-button class="dropdown-trigger">Button</paper-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Answer 1

问题是你给

height: 100%

到paper-button.x-element

但是 parent 限制了这个高度。

所以只需添加

#trigger {
  height: 100%;
}

#trigger 或 .style-scope.paper-menu-button

Answer 2

来自已接受答案的工作代码 ... jsbin.com/bisanocehu/1/edit?html,output

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-toolbar *:last-child {
        margin-right: -5px;
    }
    #trigger {
       height: 100%;
    }
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <x-element></x-element>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style>
      :host {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          height: 100%;
        };
        border-left: 1px solid white;
        height: 100%;
      }
      paper-menu-button {
        margin: 0;
        padding: 0;
        height: 100%;
        xborder-left: 1px solid var(--paper-grey-600);
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          @xapply(--height-100%);
          xheight: 100%;
        };        
      }
      paper-button:hover {
        background: white;
        color: black;
        font-weight: bold;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        color: white;
        height: 100%;
        border-radius: 0;
        margin:0;
        -o-transition      : .25s;
        -ms-transition     : .25s;
        -moz-transition    : .25s;
        -webkit-transition : .25s;
        transition         : .25s;
      }
    </style>
    <paper-menu-button>
      <paper-button class="dropdown-trigger">Button</paper-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Polymer 1.x：格式化 <paper-menu-button>

Polymer 1.x: Formatting <paper-menu-button>

css

polymer

polymer-1.0

paper-elements

我有纸按钮元素...

...但我需要纸质菜单按钮元素。

问题

代码