Polymer 1.x:帮助让这个 JSBin 呈现 <paper-header-panel> 和 <paper-toolbar>
Polymer 1.x: Help getting this JSBin to render <paper-header-panel> and <paper-toolbar>
http://jsbin.com/mefonoqanu/1/edit?html,output
This JSBin doesn't render its contents。不显示:
- 其header部分——
<paper-toolbar>
文本(即"Header"
)或
- 其 内容面板 部分 —
<div>
元素(即 "Content goes here..."
)。
What am I doing wrong? Please provide a working JSBin example.
注: Per this link, <paper-header-panel>
要求宿主有 height
.
代码
<!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>
<paper-header-panel class="flex">
<paper-toolbar>Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
http://jsbin.com/kabede/5/edit?html,output
变化:
- webcomponents 来自 rawgit 而不是 bower_components
<span class="title">
使 header 可见
- style="width:100%; height: 100%;" 在元素上查看其内容
接受答案的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://element-party.xyz/">
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element style="width:100%; height: 100%;"></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar ><span class="title">Header</span></paper-toolbar>
<div >
Content goes here...<br>
</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</html>
Here is the minimum markup necessary to answer the question:
http://jsbin.com/jocinasovo/edit?html,output
变化
- 使用
:host
添加样式
- 只需要
height
不需要width
- 无需从
bower_components
(per this link) 切换到 rawgit
CDN
- 不需要
.flex
class <paper-header-panel>
注: Per this link, <paper-header-panel>
要求宿主有 height
.
代码
<!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>
:host {
height: 100%
}
</style>
<paper-header-panel>
<paper-toolbar><span>Header</span></paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
http://jsbin.com/mefonoqanu/1/edit?html,output
This JSBin doesn't render its contents。不显示:
- 其header部分——
<paper-toolbar>
文本(即"Header"
)或 - 其 内容面板 部分 —
<div>
元素(即"Content goes here..."
)。
What am I doing wrong? Please provide a working JSBin example.
注: Per this link, <paper-header-panel>
要求宿主有 height
.
代码
<!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>
<paper-header-panel class="flex">
<paper-toolbar>Header</paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
http://jsbin.com/kabede/5/edit?html,output
变化:
- webcomponents 来自 rawgit 而不是 bower_components
<span class="title">
使 header 可见- style="width:100%; height: 100%;" 在元素上查看其内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://element-party.xyz/">
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element style="width:100%; height: 100%;"></x-element>
<dom-module id="x-element">
<template>
<style>
</style>
<paper-header-panel class="flex">
<paper-toolbar ><span class="title">Header</span></paper-toolbar>
<div >
Content goes here...<br>
</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</html>
Here is the minimum markup necessary to answer the question:
http://jsbin.com/jocinasovo/edit?html,output
变化
- 使用
:host
添加样式
- 只需要
height
不需要width
- 无需从
bower_components
(per this link) 切换到rawgit
CDN - 不需要
.flex
class<paper-header-panel>
注: Per this link, <paper-header-panel>
要求宿主有 height
.
代码
<!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>
:host {
height: 100%
}
</style>
<paper-header-panel>
<paper-toolbar><span>Header</span></paper-toolbar>
<div>Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>