用于 jsbin 等中的 polymer 1.0 错误报告演示的示例模板

Question

我需要一个模板来制作错误报告演示

这是我目前所拥有的，但我找不到像 0.5

中那样的纸和熨斗 collection

<!DOCTYPE html>
<html>

<head>
  <title>Polymer 1.0</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
  <meta name="mobile-web-app-capable" content="yes">

  <script src="https://www.polymer-project.org/1.0/webcomponents.min.js"></script>
  <!-- <link rel="import" href="https://rawgit.com/Polymer/polymer/v1.0.3/polymer.html"> -->
  
  <link rel="import" href="http://crossorigin.me/https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">
  <link rel="import" href="http://crossorigin.me/https://elements.polymer-project.org/bower_components/paper-elements/paper-elements.html">

  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&amp;lang=en' type='text/css'>
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Source+Code+Pro' type='text/css'>

  <style>
    body {
      font-family: 'RobotoDraft', sans-serif;
    }
    
    :unresolved {
      display: flex;
      justify-content: flex-start;
      background: rgba(255, 255, 255, 0.5);
      border: 2px dashed #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
    
    :unresolved:after {
      padding: 15px;
      content: 'loading...';
      color: #ccc;
    }
    
    p-test {
      border: 2px solid red;
      border-radius: 5px;
      box-sizing: border-box;
    }
  </style>

</head>

<body class="fullbleed layout vertical">

  <dom-module id="p-test">

    <template>

      <p>test</p>

    </template>

  </dom-module>

  <script>
    Polymer({
      is: 'p-test',
      ready: function() {}
    })
  </script>

  <p-test class="fit layout vertical"></p-test>

</body>

</html>

Answer 1

我似乎能够在没有所有用于导入的交叉来源的情况下做到这一点。这段代码对我有用：

html, body {
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}

paper-button {
  margin: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta description="Polymer 1.0 Template"> 
  
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

  <link rel="import" href="paper-toast/paper-toast.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <paper-button raised onclick="document.querySelector('#toast1').show()">
    Discard Draft
  </paper-button>

  <paper-button raised onclick="document.querySelector('#toast2').show()">
    Get Messages
  </paper-button>

  <paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>

  <paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
    <span role="button" tabindex="0" style="color: #eeff41;margin: 10px"
          onclick="console.log('RETRY')">
      Retry
    </span>
  </paper-toast>
</body>
</html>

用于 jsbin 等中的 polymer 1.0 错误报告演示的示例模板

Example template to use for polymer 1.0 bug report demo's in jsbin etc

polymer