聚合物1.x:让普通的<纸对话框>开始工作
聚合物1.x:让普通的<纸对话框>开始工作
提问于 2015-10-16 05:42:58
问题
要显示其
<paper-dialog>我怎么得到这个JSFiddle？ 元素？，请提供一个工作JSFiddle或JSBin示例。
代码
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>回答 3
Stack Overflow用户
回答已采纳
发布于 2015-10-16 07:10:33
如果您只想静态地查看对话框，可以在HTML (小提琴)中添加小提琴属性。
<paper-dialog id="dialog" opened> 若要打开单击，请调用open函数(小提琴)。
<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>Stack Overflow用户
发布于 2015-10-16 07:48:29
接受答案的完整代码。
代码
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>Stack Overflow用户
发布于 2016-06-22 14:11:20
这是一个使用聚合物CDN的工作小提琴。这是基于上面的答案。脚本标签似乎不像惯用的聚合物代码。
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33163291
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号