Question

如何格式化paper-icon-button-lite以匹配paper-icon-button？（即没有轮廓，也没有阴影。）How did they accomplish this in this paper-icon-button-lite demo？无论他们做了什么，显然was not necessary in this paper-icon-button demo。为什么不？我错过了什么？

Here is my jsBin

http://jsbin.com/vatuyopodu/1/edit?html,output

<!doctype html>

<head>
  <meta name="description" content="iron-data-table beta3">
  <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-icon-button/paper-icon-button.html" rel="import">
  <link href="paper-icon-button/paper-icon-button-lite.html" rel="import">
</head>

<body>
  <dom-module id="x-foo">
    <style is="custom-style">
      :host {
        font-family: arial, sans-serif;
      }

      button[is=paper-icon-button-light] {
        width: 40px;
        height: 40px;
        padding: 8px;
        margin: 10px;
      }

      button[is=paper-icon-button-light]> img {
        width: 24px;
        height: 24px;
      }
    </style> <template>
      <p>
        <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
        <code>paper-icon-button</code>
      </p>
      <p>
        <button is="paper-icon-button-light" title="octocat">
          <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
        </button>
        <code>paper-icon-button-lite</code>
      </p>
      <p>How do I format the <code>paper-icon-button-lite</code> to match the <code>paper-icon-button</code>? (i.e., No outline and no shadow.) How did they accomplish this in the demo? What am I missing?</p>
      <a href="https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/paper-icon-button-light.html&active=paper-icon-button-light">
        Here is the demo</a>.
    </template>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>

Answer 1

将transparent background和removing border添加到button[is=paper-icon-button-light]应该可以解决问题

 button[is=paper-icon-button-light] {
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 10px;
    border:none;
    background-color:transparent;
  }

＆＃13;

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="paper-icon-button/paper-icon-button-lite.html" rel="import">

<dom-module id="x-foo">
  <style>
    :host {
      font-family: arial, sans-serif;
    }
    button[is=paper-icon-button-light] {
      width: 40px;
      height: 40px;
      padding: 8px;
      margin: 10px;
      border: none;
      background-color: transparent;
    }
    button[is=paper-icon-button-light] > img {
      width: 24px;
      height: 24px;
    }
  </style>
  <template>
    <p>
      <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
      <code>paper-icon-button</code>
    </p>
    <p>
      <button is="paper-icon-button-light" title="octocat">
        <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
      </button>
      <code>paper-icon-button-lite</code>
    </p>

  </template>
  <script>
    Polymer({
      is: 'x-foo'
    });
  </script>
</dom-module>

<x-foo></x-foo>

＆＃13;

Polymer 1.x：格式化paper-icon-button-lite

1 个答案: