- Leverage the power of Web Components
- Import HTML Templates
- Understand the DOM Module
- Use WC Data Binding
- Custom Elements
- HTML Imports
- Templates
- Shadow DOM
Go to the starter code, which is just the shell for what we're about to build.
Run the usual:
$ npm i
$ bower install
Run an $ http-server
in the /starter~~~~-code
directory in an extra tab and just leave it running
So here we have some elements... lets fill em in
<ct-nav>
<ct-button route="images" active>Image</ct-button>
<ct-button route="noteCards">Note Cards</ct-button>
</ct-nav>
<ct-page view="images" class="hidden">
<img src="https://farm4.staticflickr.com/3751/10106979505_e08ac12189_o.jpg" />
</ct-page>
<ct-page view="noteCards" class="hidden">
<ct-note-card title="Note Card Title">
This is the notecard
</ct-note-card>
</ct-page>
<dom-module id="ct-button" attributes="route active">
<link rel="import" type="css" href="ct-button.css" />
<template>
<content></content>
</template>
<script src="ct-button.js"></script>
</dom-module>
And the related JS...
// element registration
Polymer( {
is: "ct-button",
properties: {
active: {
type: Boolean
}
}
})
The CSS
:host{
flex-grow:1;
min-height:30px;
width:50%;
box-sizing: border-box;
text-align: center;
cursor: pointer;
border:thin solid white;
background: darkRed;
color:white;
padding: 4px;
}
3 minutes... Find a WC button you like
2 Minutes... Turn and share. Why?
<dom-module id="ct-nav">
<link rel="import" type="css" href="ct-nav.css" />
<template>
<content></content>
</template>
<script src="ct-nav.js"></script>
</dom-module>
And the related JS
// element registration
Polymer( { is: "ct-nav",
ready: function () {
var self = this
Array.from( self.querySelectorAll( "ct-button" ) ).forEach( ( elem ) => {
elem.addEventListener( "click", ( event ) => {
this.changeView( elem.getAttribute( "route" ) )
})
})
},
changeView: function ( newView ) {
Array.from( document.querySelectorAll( "ct-page" ) ).forEach( function ( elem ) {
elem.classList.add( "hidden" )
})
document.querySelector( "ct-page[view='" + newView + "']" ).classList.remove( "hidden" )
}
} )
Some CSS to go with that:
:host{
width:100%;
display:flex;
}
3 minutes... Find a WC button you like
2 Minutes... Turn and share. Why?
<dom-module id="ct-page" attributes="view">
<link rel="import" type="css" href="ct-page.css" />
<template>
<content></content>
</template>
<script src="ct-page.js"></script>
</dom-module>
And the related JS
// element registration
Polymer({
is:"ct-page",
ready: function () {
var route = document.querySelector( "ct-button[active]" ).getAttribute( "route" )
if ( this.getAttribute( "view" ) === route ) {
this.classList.remove( "hidden" )
} else {
this.classList.add( "hidden" )
}
}
})
The related CSS
3 minutes... Find a WC button you like
2 Minutes... Turn and share. Why?
<dom-module id="ct-note-card" attributes="title">
<link rel="import" type="css" href="ct-note-card.css" />
<template>
<h3>{{title}}</h3>
<div>
<content></content>
</div>
</template>
<script src="ct-note-card.js"></script>
</dom-module>
And the related JS
Polymer({
is: "ct-note-card"
})
And some CSS
:host{
width: 98%;
border: thin solid black;
border-radius: 0 0 6px 0;
background: lightBlue;
box-shadow: 0 1px 1px 1px rgba( 0, 0, 0, .5);
display:block;
margin: 4px auto;
}
:host:hover{
box-shadow: 1px 2px 2px 1px rgba( 0, 100, 200, .5);
}
:host h3{
margin: 0;
padding: 0;
}
3 minutes... Find a WC button you like
2 Minutes... Turn and share. Why?
<dom-module id="ct-note-card" attributes="title">
<link rel="import" type="css" href="ct-note-card.css" />
<template>
<h3>{{title}}</h3>
<div>
<content></content>
</div>
</template>
<script src="ct-note-card.js"></script>
</dom-module>
And the related JS
Polymer( { is: "ct-note-card" } )
And some CSS
:host{
width: 98%;
border: thin solid black;
border-radius: 0 0 6px 0;
background: lightBlue;
box-shadow: 0 1px 1px 1px rgba( 0, 0, 0, .5);
display:block;
margin: 4px auto;
}
:host:hover{
box-shadow: 1px 2px 2px 1px rgba( 0, 100, 200, .5);
}
:host h3{
margin: 0;
padding: 0;
}
Lets find some paper elements and put them together... our objective.
- Nav Bar
- Map
- Material Design
Build a small Todo list application with Web Components using Polymer#^1.1.5 & Paper Elements.