1

我要这个...

下面是一个paper-dialog实现。它在对话框元素的顶部和底部包含空格。我想消除空白。

http://jsbin.com/bupicetoma/1/edit?html，输出 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-dialog/paper-dialog.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    --paper-menu {
      margin: 0 !important;
      padding: 0 !important;
    }
    paper-menu {
      padding: 0 !important;
    }
    paper-item:hover {
      background-color: red;
    }
    paper-item {
      --paper-item: {
        cursor: pointer;
        margin: 0;
      };
    }
  </style>

  <button on-tap="show">Show</button>

  <paper-dialog id="dia">
    <paper-menu>
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
      <paper-item>Item 3</paper-item>
    </paper-menu>
  </paper-dialog>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
      show: function() {
        this.$.dia.open();
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

......类似于这个。

我希望paper-menu对话框内部看起来像下面paper-menu没有任何空格。

http://jsbin.com/hovayitela/1/edit?html，输出 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    --paper-menu {
      margin: 0 !important;
      padding: 0 !important;
    }
    paper-menu {
      padding: 0 !important;
    }
    paper-item:hover {
      background-color: red;
    }
    paper-item {
      --paper-item: {
        cursor: pointer;
        margin: 0;
      };
    }
  </style>

  <paper-menu>
    <paper-item>Item 1</paper-item>
    <paper-item>Item 2</paper-item>
    <paper-item>Item 3</paper-item>
  </paper-menu>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
      show: function() {
        this.$.dia.open();
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

我怎样才能做到这一点？

4

1 回答 1

1

你的 CSS mixin ( --paper-menu) 应该在规则内声明（它目前在任何规则之外）。我会将其移至paper-menu规则中：

paper-menu {
  margin: 0 !important;
  padding: 0 !important;
}

jsbin

仅供参考，那个空格来自paper-dialog-shared-styles.html.

于 2017-03-01T04:28:04.700 回答