#9 Final Touch

In "#7 Material Cards", we added cards to our first tab. Now it is time to add content to our second tab. I will not be covering everything which the video showed in the "#1 Overview" i.e the color-chooser part. You can see the whole code here.

But yes, I will be showing some extra stuff in data-binding. It will look like this...

When you'll move the slider, the height of box will change. So let's get started.

If you do not know how to create Custom Element, go here.

1. Create "second-tab.html".

<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="second-tab" attributes="z">
   <template>
      <style>  </style>

      <!--Content held by our element goes here-->
   </template>
 <script src="second-tab.js"></script>
</polymer-element>

2. Add content.

<div class="container">
 <div style="padding: 25px;">
  <paper-shadow id="boxShadow" z="3" animated>
   <div id="box">
    <paper-ripple fit></paper-ripple>
   </div>
  </paper-shadow>
 </div>
 <div style="display:flex;margin-top: 10px;">
  <core-label style="align-self:center;">shadow</core-label>
  <paper-slider id="zSlider" min="0" max="5" value="{{z}}" snaps="true" pin="true" editable="true"></paper-slider>
 </div>
</div>

• Refer to the attributes of slider here.

3. Add style.

.container {
 display: flex;
 flex-direction: column;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
#boxShadow {
 display: inline-block;
}
#box {
 height: 130px;
 width: 130px;
 position: relative;
 background-color: #808080;
}

NOTE:

1. You need "inline-block" (in css) and "fit" attribute for paper-ripple to work properly.
2. "paper-ripple" tag should be inserted within an element on which ripple effect is needed.

4. Add the script "second-tab.js" to catch change of slider value.

Polymer('second-tab',{
 ready: function(){
 this.z = "3";
 },
zChanged: function() {
 this.$.boxShadow.setZ(this.z);
 this.fire('shadow-z-changed');//coz z="{{z}}" and change event not working
 }
});

• Since there was some problem in two-way data-binding in case of "paper-shadow" tag, so I used another method.
• This method is extremely useful if you want to keep an eye on any property.
• Here, zChanged fires the code below itself if it sees any changes in the "z" property of  "paper-shadow".

That is all guys. Hope you enjoyed building your first Polymer Chrome App.

Share this tutorial, leave your comments below and Keep Coding.