代码

<!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>

Answer 1

http://jsbin.com/kabede/5/edit?html,output

变化：

来自rawgit的webcomponents而不是bower_components
<span class="title">使标题可见
style =“width：100％; height：100％;”在元素上看到它的内容

Answer 2

接受的答案代码

#app/controllers/projects_controller.rb
class ProjectsController < ApplicationController
   def index
       @users = Project.all_users
   end
end

#app/models/project.rb
class Project < ActiveRecord::Base
   scope :all_users, -> { joins(:users) } #-> this needs to be tested
end

#app/views/projects/index.haml
- @users.each do |user|
  = user.name

Answer 3

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

<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>

Polymer 1.x：帮助让这个JSBin呈现<paper-header-panel>和<paper-toolbar>

代码

3 个答案:

更改

代码