如何将 Polymer 元素导入 plunker (plnkr.co)、jsBin 和 jsFiddle 等代码平台?
How do I import Polymer elements into code playgrounds like plunker (plnkr.co), jsBin and jsFiddle?
问题:
在 this Plunk 中,我想导入 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>
注意:Here is a JS Bin 导入 Polymer 元素。
<!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>
使用此 cdn 导入您的 elements/scripts:
https://github.com/Download/polymer-cdn
因此,您的导入将是(取决于您要使用的版本):
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-button/paper-button.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-menu/paper-menu.html" />
如果您只需要为您的组件引用聚合物,请导入:
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html" />
这在 plunker 中对我有用。
问题:
在 this Plunk 中,我想导入 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>
注意:Here is a JS Bin 导入 Polymer 元素。
<!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>
使用此 cdn 导入您的 elements/scripts: https://github.com/Download/polymer-cdn
因此,您的导入将是(取决于您要使用的版本):
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-button/paper-button.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-menu/paper-menu.html" />
如果您只需要为您的组件引用聚合物,请导入:
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html" />
这在 plunker 中对我有用。