Create Elements page : https://www.polymer-project.org/docs/start/creatingelements.html
- npm install -g bower
- bower init
- bower install --save Polymer/polymer
- bower install --save Polymer/core-elements
- bower install --save Polymer/paper-elements
- bower install --save Polymer/core-ajax
Chrome Dev Editor
index.html:
bower_components/
elements/
index.html:
<!DOCTYPE html><html>
<head>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="elements/my-element.html"> </head>
<body>
<!-- 3. Declare the element by its tag. -->
<my-element></my-element>
</body>
</html>
elements/my-element.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="my-element" noscript>
<template>
<span>I'm <b>my-element</b>. This is my Shadow DOM.</span>
<core-ajax url="https://api.github.com/users/angular" auto response="{{resp}}">
</core-ajax>
<textarea value="{{resp}}"></textarea>
</template>
</polymer-element>
elements/proto-element.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
<script> Polymer({
ready: function() {
// properties and methods here
}
});
</script>
</polymer-element>
API Guide
GDG Triangle Polymer Introduction
[ core-elements.html#core-toolbar ] :
<body unresolved>
<core-toolbar>
<div>Toolbar</div>
</core-toolbar>
</body>
[ paper-elements.html#paper-tabs ]
<body unresolved fullbleed>
<core-toolbar class="medium-tall">
<paper-icon-button icon="menu"> </paper-icon-button>
<div flex>Title</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom fit" horizontal layout>
<paper-tabs selected="0" flex style="max-width: 600px;">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</div>
</core-toolbar>
</body>
Polymer Player
https://github.com/kylebuch8/PolymerPlayer/blob/master/index.html
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-song/player-song.html
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-songs.html
<template repeat="{{sng, i in songs}}">
<div class="song" needZ?="{{song.title === sng.title}}">
<div hero-id="{{sng.title}}" hero>
<div class="bg" style="background-image: url(images/{{sng.img}});">
<player-color-thief song="{{sng}}"></player-color-thief>
</div>
<div class="footer" style="background-color: {{sng.dominantColor}}; color: {{sng.textColor}};">
<span class="title">{{sng.title}}</span>
<br> <small>{{sng.artist}}</small>
</div>
</div>
</div>
</template>
https://github.com/flatiron/director
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-color-thief.html
<polymer-element name="player-color-thief" attributes="song">
<body unresolved fullbleed>
<core-toolbar class="medium-tall">
<paper-icon-button icon="menu"> </paper-icon-button>
<div flex>Title</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom fit" horizontal layout>
<paper-tabs selected="0" flex style="max-width: 600px;">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</div>
</core-toolbar>
</body>
Polymer Player
https://github.com/kylebuch8/PolymerPlayer/blob/master/index.html
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-song/player-song.html
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-songs.html
<template repeat="{{sng, i in songs}}">
<div class="song" needZ?="{{song.title === sng.title}}">
<div hero-id="{{sng.title}}" hero>
<div class="bg" style="background-image: url(images/{{sng.img}});">
<player-color-thief song="{{sng}}"></player-color-thief>
</div>
<div class="footer" style="background-color: {{sng.dominantColor}}; color: {{sng.textColor}};">
<span class="title">{{sng.title}}</span>
<br> <small>{{sng.artist}}</small>
</div>
</div>
</div>
</template>
https://github.com/flatiron/director
https://github.com/kylebuch8/PolymerPlayer/blob/master/components/player-songs/player-color-thief.html
<polymer-element name="player-color-thief" attributes="song">
- https://www.polymer-project.org/docs/elements/
- https://www.polymer-project.org/docs/elements/core-elements.html
- http://kylebuch8.github.io/PolymerPlayer/
- https://github.com/kylebuch8/PolymerPlayer
- https://github.com/KamiQuasi/wc-overview
- https://www.polymer-project.org/apps/topeka/
- https://github.com/polymer/topeka
No comments:
Post a Comment