Polymer 1.x：让普通 <paper-dialog> 工作

Question

问题

How do I get this JSFiddle to display its <paper-dialog> element? Please provide a working JSFiddle or JSBin example.

代码

http://jsfiddle.net/gr3uhucf/2/

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body>
  <paper-button data-dialog="dialog">Dialog</paper-button>
  <paper-dialog id="dialog">
    <h2>Dialog Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </paper-dialog>
</body>
</html>

Answer 1

如果您只想静态查看对话框，可以在 HTML (fiddle) 中添加 openend 属性。

<paper-dialog id="dialog" opened>

要在点击时打开，请调用 open 函数 (fiddle)。

<paper-button id="dialog-button" data-dialog="dialog">Dialog</paper-button>
<paper-dialog id="dialog">
    <h2>Dialog Title</h2>
</paper-dialog>

<script> 
    document.querySelector("#dialog-button").addEventListener("click", 
        function(){
            document.querySelector("#dialog").open();
        });
</script>

Answer 2

Full code of accepted answer.

代码

http://jsfiddle.net/6x2g4dc5/

<!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">
</head>
<body>
  <paper-button id="dialog-button" data-dialog="dialog">Dialog</paper-button>
  <paper-dialog id="dialog" modal>
    <h2>Dialog Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </paper-dialog>
  <script> 
    document.querySelector("#dialog-button")
            .addEventListener("click", function(){
              document.querySelector("#dialog").open()
              });
  </script>
</body>
</html>

Answer 3

这是一个使用聚合物 CDN 的工作 jsfiddle。它基于上面的答案。脚本标签看起来不像惯用的聚合物代码。

https://jsfiddle.net/bncg3qy8/

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
  :root {
    --paper-tabs-selection-bar-color: var(--paper-light-blue-900);
    --paper-tab-ink: var(--paper-light-blue-100);
    --paper-tabs: {
      color: white;
      background-color: var(--paper-light-blue-500);
    };
  }
</style>

<body>
  <paper-button id="dialog-button" data-dialog="dialog">Dialog</paper-button>
  <paper-dialog id="dialog">
    <h2>Dialog Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </paper-dialog>

    <script> 
        document.querySelector("#dialog-button").addEventListener("click", function(){document.querySelector("#dialog").open()});
    </script>
</body>

Polymer 1.x：让普通 <paper-dialog> 工作

Polymer 1.x: Getting plain <paper-dialog> to work

polymer

polymer-1.0

paper-elements

问题

代码

代码