Polymer: Creating a simple list component – Part 2

Now that I already explained how to build a simple list component using Polymer, I will optimize the component and make it look nicer.

Changes to the listcard-person component

I have changed the listcard-person component to make it more efficient. First I have removed the core-list usage and  now I am using a simple template with a repeat tag

Previously

Now

Using the repeat functionality of <template> we can reduce the complexity of our code. Repeat is used to bind a collection to the template contents. In our example, we will work in our collection personData and each item will be assigned to “person” variable for each item of our collection.

Inside the template we will use the “person” variable and access the properties of each element (i.e. person.name, person.address and person.profession).

Some changes was made to the style of the component, and are available in the download below.

Changes to Index.html

In index.html some changes have been made to make it more appealing.

I am using the following links:

And a css specially designed to be used with Polymer. This css was downloaded from PolymerTemplates where you can download another free css templates. I choosed the   The Times template in this example.

The entire body of index.html was changed, but the script section is the same from previous example.

You can see the result in the image below. You can see that I am using a material design similar style.

ImgSample1

 

You can download the project files from the link below. The download does not include the bower_components elements, that you can download/install using bower (as already presented in Polymer: Basic installation article).

Download RAR file or  ZIP file.

In next part I will show how to allow user to insert new items in the list using Polymer components.