在聚合物1.3.0中創建自定義元素

我是編程和聚合物的新手。我試圖從演示代碼中創建自定義元素。在聚合物1.3.0中創建自定義元素

這是從演示代碼：

我想讓其中的一個例子的自定義元素，但它不工作，這是我的嘗試：

<!-- 
@license 
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
Code distributed by Google as part of the polymer project is also 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
--> 

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-styles/typography.html"> 

<link rel="import" href="../../bower_components/iron-demo-helpers/demo-snippet.html"> 
<link rel="import" href="../../bower_components/iron-demo-helpers/demo-pages-shared-styles.html"> 

<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"> 
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html"> 
<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html"> 
<link rel="import" href="../../bower_components/iron-icons/social-icons.html"> 
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="import" href="../../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html"> 
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../../bower_components/paper-styles/color.html"> 
<link rel="import" href="../../bower_components/paper-styles/typography.html"> 
<link rel="import" href="../../bower_components/paper-card/paper-card.html"> 

<polymer-element name ="test-favorite" noscript> 
    <style is="custom-style" include="demo-pages-shared-styles"> 
    demo-snippet { 
     --demo-snippet-demo: { 
     background: var(--paper-grey-200); 
     padding: 8px; 
     }; 
     --demo-snippet-code: { 
     max-height: 300px; 
     }; 
    } 
    paper-card { 
     width: 100%; 
    } 
    .horizontal { 
     @apply(--layout-horizontal); 
    } 
    .justified { 
     @apply(--layout-justified); 
    } 
    .amber { 
     background: var(--paper-amber-900); 
    } 
    .lime { 
     background: var(--paper-lime-500); 
    } 
    .cyan { 
     background: var(--paper-cyan-500); 
    } 
    .dark { 
     background: var(--paper-blue-grey-500); 
    } 
    paper-card.dark, paper-card.amber, paper-card.lime, paper-card.cyan { 
     color: white; 
     --paper-card-header-color: white; 
    } 
    paper-checkbox { 
     display: block; 
     margin-bottom: 4px; 
     --paper-checkbox-label-color: white; 
     --paper-checkbox-unchecked-color: white; 
    } 
    paper-icon-button { 
     color: var(--paper-grey-600); 
    } 
    paper-icon-button.white { 
     color: white !important; 
    } 
    </style> 

    <template> 
    <div class="vertical-section-container centered"> 
     <h3>A paper-card with a simple heading, header image, body content, and actions</h3> 
     <demo-snippet> 
     <template> 
      <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000"> 
      <div class="card-content"> 
       Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese. 
      </div> 
      <div class="card-actions"> 
       <paper-button>Share</paper-button> 
       <paper-button>Explore!</paper-button> 
      </div> 
      </paper-card> 
     </template> 
     </demo-snippet> 
    </div> 
    </template> 
</polymer-element>

有人可以幫忙嗎？它只是一些複製&粘貼，但我沒有得到它的工作。

提前致謝！

乾杯

來源

2016-05-16 moon

的<polymer-element>標籤是從0.5語法（作廢）。要使用1.x語法創建模塊，您可以使用<dom-module>。下面是一個創建從演示的paper-card的等效代碼：

<head> 
 
    <base href="https://polygit.org/polymer+:master/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-button/paper-button.html"> 
 
    <link rel="import" href="paper-card/paper-card.html"> 
 
    <link rel="import" href="paper-styles/typography.html"> 
 
</head> 
 

 
<body> 
 
    <x-foo></x-foo> 
 

 
    <dom-module id="x-foo"> 
 
    <style> 
 
     paper-card { 
 
     width: 100%; 
 
     } 
 
    </style> 
 
    <template> 
 
     <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000"> 
 
     <div class="card-content"> 
 
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese. 
 
     </div> 
 
     <div class="card-actions"> 
 
      <paper-button>Share</paper-button> 
 
      <paper-button>Explore!</paper-button> 
 
     </div> 
 
     </paper-card> 
 
    </template> 
 
    <script> 
 
     Polymer({ 
 
     is: 'x-foo', 
 
     properties: { 
 
      foo: { 
 
      type: String, 
 
      value: "Hello world!" 
 
      } 
 
     } 
 
     }); 
 
    </script> 
 
    </dom-module> 
 
</body>

^jsbin

我建議使用Polymer Starter Kit，其中包括a couple elements，你可以自定義。

來源

2016-05-16 09:55:57 tony19

在聚合物1.3.0中創建自定義元素

回答

相關問題