Skip to content

Latest commit

 

History

History
67 lines (47 loc) · 2.29 KB

polymer_manual__basic__library.adoc

File metadata and controls

67 lines (47 loc) · 2.29 KB
Raw

Polymer Elements Library

Polymer provides a large set of standard components that are grouped in collections: iron-elements, paper-elements, app-elements, gold-elements, etc.

The first two collections are the most basic and commonly used:

  • Iron elements provide some very basic components that are required for almost every project: input, label, etc.

  • Paper elements provide a set of UI components implementing material design: input, checkbox, slider, etc.

You already saw iron-input in our previous examples. Let’s check one of the paper elements: paper-checkbox. It is a flat design implementation of a simple checkbox. Below is a simple application that uses this element.

Music taste analyzer

It’s a component that can analyze person’s music preferences and draw a mental portrait based on it. Let’s check how it works under the hood.

Source code

index.html
<html>
<head>
	<link rel="import" href="src/polymer-basic/library/music-survey.html">
	<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <music-survey></music-survey>
</body>
</html>
src/polymer-basic/library/music-survey.html
link:../../../../source/polymer-build/src/polymer-basic/library/music-survey.html[role=include]

To learn more about the standard library of Polymer components visit https://www.webcomponents.org/collection/Polymer/elements

What we have learned so far

  • Polymer offers a number of ready-to-use components.

  • Iron elements are the most basic components from the standard library.

  • Paper elements collection provides a list of UI components implementing material design.

  • We can use Polymer.dom(this.root).querySelectorAll("some-selector-there") to find elements in our component.