quickstart.md

layout	title	stylesheets
home	Quickstart	/css/homepage.css

<style shim-shadowdom> core-tooltip { display: inline-flex; cursor: default; border-radius: 3px; outline: none; } core-tooltip:hover, core-tooltip:focus { background: white; } core-tooltip::shadow .polymer-tooltip { opacity: 0; -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07); transition: all 300ms cubic-bezier(0,1.92,.99,1.07); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); /*white-space: initial;*/ /*min-width: 300px;*/ /*max-width: 300px;*/ line-height: 1.5; } core-tooltip:hover::shadow .polymer-tooltip, core-tooltip:focus::shadow .polymer-tooltip { opacity: 1; transform: translate3d(0, 0, 0); } /*#glanceapp /deep/ .polymer-tooltip { visibility: visible !important; }*/ google-map { display: block; width: 400px; height: 400px; } </style>

Quickstart: {{site.project_title}} at a glance (1 min)

Using components

{{site.project_title}}'s collection of elements are ready to drop in your page. To use a component, simply import it, then use it.

<link rel="import" href="google-map.html">
<link rel="import" href="google-map-directions.html">
<map-directions start="San Francisco"
end="Mountain View"
travelMode="DRIVING"></map-directions>
<google-map id="map" zoom="14" showCenterMarker></google-map>
<script>
var gmap = document.querySelector('#map');
gmap.addEventListener('map-ready', function(e) {
var dirs = document.querySelector('map-directions');
dirs.map = gmap.map;
});
</script>

Creating components

{{site.project_title}} allows you to declaratively build custom elements using <polymer-element>. The DOM and CSS of your element are encapsulated using Shadow DOM. Inside {{site.project_title}} you can use features like two-way data binding and declarative event handlers.

<link rel="import" href="../polymer/polymer.html">
<polymer-element name="hello-element" attributes="name">
<template>
<link rel="stylesheet" href="element.css">
<div on-click="{%raw%}{{sayHi}}{%endraw%}">Hello, <b id="name">{%raw%}{{name}}{%endraw%}</b>!

<template> <script> Polymer('name-tag', { name: 'Dimitri', nameChanged: function() {

  },
  sayHi: function() {
    alert('Hi!' + this.name);
  },
});

</script> </polymer-element> {% highlight html %} #name { color: red; } @media only screen and (min-width: 580px) { #name { letter-spacing: 5px; } } {% endhighlight %} {% highlight html %}

<script src="webcomponents.js"></script> {% endhighlight %}

Anatomy of an element

• Imports
• polymer-element
• todo...
• hook these up to the tooltip

<script> document.addEventListener('polymer-ready', function(e) { var gMap = document.querySelector('google-map'); gMap.addEventListener('google-map-ready', function(e) { document.querySelector('google-map-directions').map = gMap.map; //gSearch.map = gMap.map; }); // var geoLocation = document.querySelector('geo-location'); // geoLocation.addEventListener('core-response', function(e) { // gMap.latitude = geoLocation.latitude; // gMap.longitude = geoLocation.longitude; // }); }); </script>