问聚合物1.x:格式化纸张-图标-按钮-lite
EN

Stack Overflow用户

提问于 2016-07-08 14:55:20

回答 0查看 99关注 0票数 0

如何格式化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>

css

polymer

polymer-1.0

paper-elements

回答

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

原文链接：

https://stackoverflow.com/questions/38260618

复制

相似问题

问聚合物1.x:格式化纸张-图标-按钮-lite
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物1.x:格式化纸张-图标-按钮-liteEN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物1.x:格式化纸张-图标-按钮-lite
EN