Polymer
Framework
Install
bower init
bower install --save Polymer/polymer#^1.2.0
bower update
-----------
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements
Catalogo
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</head>
<body>
<p>u rock</p>
</body>
</html>+paper elements
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-card/paper-card.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-card heading="Card Title">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
</body>
</html>My elements
- mkdir elements en el root del site
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="test-element">
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({
is: "test-element",
ready: function() {
alert(123);
}
});
</script>
</dom-module>Layouts css+helpers
- Using CSS flexible boxes
- Bullet Two
- Bullet Three
Layout classes
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="http://kasperpeulen.github.io/PolymerElements/all.html">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Polymer 1.0 Layout Classes</h1>
<div class="horizontal layout">
<div><p>div</p></div>
<div class="flex"><p>flex (horizontal layout)</p></div>
<div><p>div</p></div>
</div>
<div class="vertical layout" style="height:250px">
<div><p>div</p></div>
<div class="flex"><p>flex (vertical layout)</p></div>
<div><p>div</p></div>
</div>
<div class="horizontal layout">
<div class="flex-3"><p>flex three</p></div>
<div class="flex"><p>flex</p></div>
<div class="flex-2"><p>flex two</p></div>
</div>
<div class="horizontal layout" style="height:100px">
<div><p>horizontal default</p></div>
</div>
<div class="horizontal layout start" style="height:100px">
<div><p>horizontal start</p></div>
</div>
<div class="horizontal layout center" style="height:100px">
<div><p>horizontal center</p></div>
</div>
<div class="horizontal layout end" style="height:100px">
<div><p>horizontal end</p></div>
</div>
<div class="vertical layout" style="height:100px">
<div><p>vertical default</p></div>
</div>
<div class="vertical layout start" style="height:100px">
<div><p>vertical start</p></div>
</div>
<div class="vertical layout center" style="height:100px">
<div><p>vertical center</p></div>
</div>
<div class="vertical layout end" style="height:100px">
<div><p>vertical end</p></div>
</div>
<div class="horizontal layout start-justified" style="height:100px">
<div><p>horizontal start-justified</p></div>
</div>
<div class="horizontal layout center-justified" style="height:100px">
<div><p>horizontal layout center-justified</p></div>
</div>
<div class="horizontal layout end-justified" style="height:100px">
<div><p>horizontal layout end-justified</p></div>
</div>
<div class="vertical justified layout" style="height:150px">
<div><p>justified</p></div>
<div><p>justified</p></div>
<div><p>justified</p></div>
</div>
<div class="horizontal around-justified layout">
<div><p>around-justified</p></div>
<div><p>around-justified</p></div>
</div>
<div class="horizontal layout" style="height:150px">
<div class="flex self-start"><p>self-start</p></div>
<div class="flex self-center"><p>self-center</p></div>
<div class="flex self-end"><p>self-end</p></div>
<div class="flex self-stretch"><p>self-stretch</p></div>
</div>
<div class="horizontal layout wrap" style="width:150px; height:70px">
<div><p>horizontal</p></div>
<div><p>lay</p></div>
<div><p>out</p></div>
<div><p>wrap</p></div>
</div>
<div class="horizontal-reverse layout">
<div><p>horizontal</p></div>
<div><p>reverse</p></div>
<div><p>layout</p></div>
</div>
<div class="vertical-reverse layout" style="height:150px">
<div><p>vertical</p></div>
<div><p>reverse</p></div>
<div><p>layout</p></div>
</div>
</body>
</html>Title Text
- Bullet One
- Bullet Two
- Bullet Three
Polymer
By Mijail Paz
