how to add polymer core elements

How to Install Polymer core elements using Bower in Chrome Dev Editor

Polymer core elements are utility elements that are either visual or non-visual  that are used to work with layouts,user inputs etc.To use these core elements,one is required to Install Bower which is a web packaging tool.Note that once you install Polymer component using Bower,all its dependencies are installed under bower_components.

How to Install Polymer core elements

If you inspect bower-components folder,you will see some of the pre-installed paper components.We  could Install these elements by running “bower install Polymer/core-elements” in the command prompt but since Chrome Dev Editor has no interface to run this,We will have to manually edit bower.json file and include below code.

Add core dependencies  to bower.json file

how to add polymer core elements

After adding above code,Right click on Json file in the editor then Run Bower Update Option

How to Install Polymer core elements using Bower in Chrome Dev Editor

Install the Roboto font

The next dependencies to be installed is Roboto font.

The same way we did with installing bower components,Click to edit bower.json file.

Add below code to the file.

After adding above code,Right click on Json file in the editor then Run Bower Update Option.

Your bower.json code should look like the one below.

The next step is creating application root elements.


How to Create  Polymer Application  root element

In world of Polymers,everything is an element and even our application is a element to.

Steps:

  • Create a File in Chrome Editor Dev and name it codelab-app.html

How to Create Polymer Application root element

  • Add some basic markup for the element in that file.
  • Using HTML,import  load the file in index.html
  • Declare element instance on the page.

In codelab-app.html add this code

 

Next is editing style.css file

 

Last file to Edit is index.html.In the head section of this file we will import codelab-app.html using below code.

Then we remove all the index.html content in the body and declare <codelab-app></codelab-app>

Running the App

Click Run button and you should see this result “Hello Google  Polymers….Getting started

Don’t forget to share this article.

previous

About the Author: Eric K

My name is Eric.Am a software developer with skills in Php,Mysql, Java , Android,Node.js Above all, I have certification in Cisco Networking Associate (CCNA) and holds degree in Information Technology. Hire me: Email : kawi3462@gmail.com