问题

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。（注意有空白区域 - 悬停时不会突出显示 - 按钮上方和下方。）

问题

请帮我格式化第二个JSFiddle，像第一个JSFiddle一样（悬停）。（即，没有空格。填充工具栏的整个高度。）

请在答案中提供有效的JSFiddle或JSBin。

注意：我在许多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

但是父母正在限制这个高度。

所以简单地添加

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

我有纸质按钮元素......

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

问题

代码

2 个答案: