在 Polymer 1.3.0 中创建自定义元素
Creating custom elements in Polymer 1.3.0
我是编程和 Polymer 的新手。我正在尝试使用演示代码创建自定义元素。
这是演示中的代码:
我想为其中一个示例制作自定义元素,但它不起作用,这是我的尝试:
<!--
@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>
有人可以帮忙吗?它只是一些复制和粘贴,但我没有让它工作。
提前致谢!
干杯
<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>
我建议使用您可以自定义的 Polymer Starter Kit, which includes a couple elements。
我是编程和 Polymer 的新手。我正在尝试使用演示代码创建自定义元素。
这是演示中的代码:
我想为其中一个示例制作自定义元素,但它不起作用,这是我的尝试:
<!--
@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>
有人可以帮忙吗?它只是一些复制和粘贴,但我没有让它工作。
提前致谢!
干杯
<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>
我建议使用您可以自定义的 Polymer Starter Kit, which includes a couple elements。