如何将Polymer元素导入到代码仓库(如plunker(plnkr.co)，jsBin和jsFiddle)中? [英] How do I import Polymer elements into code playgrounds like plunker (plnkr.co), jsBin and jsFiddle?
问题描述
问题:
在此插件中，我要导入Polymer 1.0元素<paper-button>和<paper-menu>.
我该怎么做?
换句话说，<script>和<link>标签以及它们各自的src和href属性的正确集合是什么，这些属性将允许我的<paper-button>和<paper-menu>元素正常运行?
尝试:
在右边距中，有一个搜索和导入外部库的选项.我用它来搜索Polymer 1.0，然后导入了以下内容.
<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
注意:这里是导入聚合物元素的JS Bin .
<!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 class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>...</style>
<!-- Element markup goes here -->
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
Question:
In this Plunk, I want to import the Polymer 1.0 elements <paper-button> and <paper-menu>.
How do I do that?
In other words, what is the proper set of <script> and <link> tags and their respective src and href attributes that will allow my <paper-button> and <paper-menu> elements to properly function?
Attempts:
In the right margin, there is an option to search and import external libraries. I used that to search for Polymer 1.0 and I imported the following.
<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
Note: Here is a JS Bin that imports Polymer elements.
<!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 class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>...</style>
<!-- Element markup goes here -->
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
这篇关于如何将Polymer元素导入到代码仓库(如plunker(plnkr.co)，jsBin和jsFiddle)中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
