|
1 | | -# Polymer |
2 | | - |
3 | | -[](https://travis-ci.org/Polymer/polymer) |
4 | | - |
5 | | -Polymer lets you build encapsulated, re-usable elements that work just like HTML elements, to use in building web applications. |
6 | | - |
7 | | -```html |
8 | | -<!-- Polyfill Web Components for older browsers --> |
9 | | -<script src="webcomponentsjs/webcomponents-lite.min.js"></script> |
10 | | - |
11 | | -<!-- Import element --> |
12 | | -<link rel="import" href="google-map.html"> |
13 | | - |
14 | | -<!-- Use element --> |
15 | | -<google-map latitude="37.790" longitude="-122.390"></google-map> |
16 | | -``` |
17 | | - |
18 | | -## Getting Started |
19 | | - |
20 | | -Check out [polymer-project.org](https://www.polymer-project.org) for all of the library documentation, including getting started guides, tutorials, developer reference, and more. |
21 | | - |
22 | | -Or if you'd just like to download the library, check out our [releases page](https://github.com/polymer/polymer/releases). |
23 | | - |
24 | | -## Polymer in 1 Minute |
25 | | - |
26 | | -The Polymer library is a lightweight sugaring layer on top of the [web components](http://webcomponents.org/) API's to help in building your own web components. It adds convenient features to make it easy to build complex elements: |
27 | | - |
28 | | -**Create and register a custom element** |
29 | | - |
30 | | -```js |
31 | | -/** |
32 | | - * A not-very-useful inline element |
33 | | - */ |
34 | | -Polymer({ |
35 | | - is: 'my-element' |
36 | | -}); |
37 | | -``` |
38 | | - |
39 | | -```html |
40 | | -<!-- use the element --> |
41 | | -<my-element></my-element> |
42 | | -``` |
43 | | - |
44 | | -**Add markup to your element** |
45 | | - |
46 | | -```html |
47 | | -<!-- define the markup that your element will use --> |
48 | | -<dom-module id="my-simple-namecard"> |
49 | | - <template> |
50 | | - <div> |
51 | | - Hi! My name is <span>Jane</span> |
52 | | - </div> |
53 | | - </template> |
54 | | - |
55 | | - <script> |
56 | | - Polymer({ |
57 | | - is: 'my-simple-namecard' |
58 | | - }); |
59 | | - </script> |
60 | | -</dom-module> |
61 | | -``` |
62 | | - |
63 | | -**Configure properties on your element...** |
64 | | - |
65 | | -```js |
66 | | -// Create an element that takes a property |
67 | | -Polymer({ |
68 | | - is: 'my-property-namecard', |
69 | | - properties: { |
70 | | - myName: { |
71 | | - type: String |
72 | | - } |
73 | | - }, |
74 | | - ready: function() { |
75 | | - this.textContent = 'Hi! My name is ' + this.myName; |
76 | | - } |
77 | | -}); |
78 | | -``` |
79 | | - |
80 | | -**...and have them set using declarative attributes** |
81 | | - |
82 | | -```html |
83 | | -<!-- using the element --> |
84 | | -<my-property-namecard my-name="Jim"></my-property-namecard> |
85 | | -``` |
86 | | - |
87 | | -> Hi! My name is Jim |
88 | | -
|
89 | | -**Bind data into your element using the familiar mustache-syntax** |
90 | | - |
91 | | -```html |
92 | | -<!-- define markup with bindings --> |
93 | | -<dom-module id="my-bound-namecard"> |
94 | | - <template> |
95 | | - <div> |
96 | | - Hi! My name is <span>{{myName}}</span> |
97 | | - </div> |
98 | | - </template> |
99 | | - |
100 | | - <script> |
101 | | - Polymer({ |
102 | | - is: 'my-bound-namecard', |
103 | | - properties: { |
104 | | - myName: { |
105 | | - type: String |
106 | | - } |
107 | | - } |
108 | | - }); |
109 | | - </script> |
110 | | -</dom-module> |
111 | | -``` |
112 | | - |
113 | | -```html |
114 | | -<!-- using the element --> |
115 | | -<my-bound-namecard my-name="Josh"></my-bound-namecard> |
116 | | -``` |
117 | | - |
118 | | -> Hi! My name is Josh |
119 | | -
|
120 | | -**Style the internals of your element, without the style leaking out** |
121 | | - |
122 | | -```html |
123 | | -<!-- add style to your element --> |
124 | | -<dom-module id="my-styled-namecard"> |
125 | | - <template> |
126 | | - <style> |
127 | | - /* This would be crazy in non webcomponents. */ |
128 | | - span { |
129 | | - font-weight: bold; |
130 | | - } |
131 | | - </style> |
132 | | - |
133 | | - <div> |
134 | | - Hi! My name is <span>{{myName}}</span> |
135 | | - </div> |
136 | | - </template> |
137 | | - |
138 | | - <script> |
139 | | - Polymer({ |
140 | | - is: 'my-styled-namecard', |
141 | | - properties: { |
142 | | - myName: { |
143 | | - type: String |
144 | | - } |
145 | | - } |
146 | | - }); |
147 | | - </script> |
148 | | -</dom-module> |
149 | | -``` |
150 | | - |
151 | | -```html |
152 | | -<!-- using the element --> |
153 | | -<my-styled-namecard my-name="Jesse"></my-styled-namecard> |
154 | | -``` |
155 | | - |
156 | | -> Hi! My name is **Jesse** |
157 | | -
|
158 | | -**and so much more!** |
159 | | - |
160 | | -Web components are an incredibly powerful new set of primitives baked into the web platform, and open up a whole new world of possibility when it comes to componentizing front-end code and easily creating powerful, immersive, app-like experiences on the web. |
161 | | - |
162 | | -By being based on Web Components, elements built with Polymer are: |
163 | | - |
164 | | -* Built from the platform up |
165 | | -* Self-contained |
166 | | -* Don't require an overarching framework - are interoperable across frameworks |
167 | | -* Re-usable |
168 | | - |
169 | | -## Contributing |
170 | | - |
171 | | -The Polymer team loves contributions from the community! Take a look at our [contributing guide](CONTRIBUTING.md) for more information on how to contribute. |
172 | | - |
173 | | -## Communicating with the Polymer team |
174 | | - |
175 | | -Beyond Github, we try to have a variety of different lines of communication available: |
176 | | - |
177 | | -* [Blog](https://blog.polymer-project.org/) |
178 | | -* [Twitter](https://twitter.com/polymer) |
179 | | -* [Google+ community](https://plus.google.com/communities/115626364525706131031) |
180 | | -* [Mailing list](https://groups.google.com/forum/#!forum/polymer-dev) |
181 | | -* [Slack channel](https://bit.ly/polymerslack) |
182 | | - |
183 | | -# License |
184 | | - |
185 | | -The Polymer library uses a BSD-like license available [here](./LICENSE.txt) |
| 1 | +# Polymer |
| 2 | + |
| 3 | +[](https://travis-ci.org/Polymer/polymer) |
| 4 | + |
| 5 | +Polymer lets you build encapsulated, re-usable elements that work just like HTML elements, to use in building web applications. |
| 6 | + |
| 7 | +```html |
| 8 | +<!-- Polyfill Web Components for older browsers --> |
| 9 | +<script src="webcomponentsjs/webcomponents-lite.min.js"></script> |
| 10 | + |
| 11 | +<!-- Import element --> |
| 12 | +<link rel="import" href="google-map.html"> |
| 13 | + |
| 14 | +<!-- Use element --> |
| 15 | +<google-map latitude="37.790" longitude="-122.390"></google-map> |
| 16 | +``` |
| 17 | + |
| 18 | +## Getting Started |
| 19 | + |
| 20 | +Check out [polymer-project.org](https://www.polymer-project.org) for all of the library documentation, including getting started guides, tutorials, developer reference, and more. |
| 21 | + |
| 22 | +Or if you'd just like to download the library, check out our [releases page](https://github.com/polymer/polymer/releases). |
| 23 | + |
| 24 | +## Polymer in 1 Minute |
| 25 | + |
| 26 | +The Polymer library is a lightweight sugaring layer on top of the [web components](http://webcomponents.org/) API's to help in building your own web components. It adds convenient features to make it easy to build complex elements: |
| 27 | + |
| 28 | +**Create and register a custom element** |
| 29 | + |
| 30 | +```js |
| 31 | +/** |
| 32 | + * A not-very-useful inline element |
| 33 | + */ |
| 34 | +Polymer({ |
| 35 | + is: 'my-element' |
| 36 | +}); |
| 37 | +``` |
| 38 | + |
| 39 | +```html |
| 40 | +<!-- use the element --> |
| 41 | +<my-element></my-element> |
| 42 | +``` |
| 43 | + |
| 44 | +**Add markup to your element** |
| 45 | + |
| 46 | +```html |
| 47 | +<!-- define the markup that your element will use --> |
| 48 | +<dom-module id="my-simple-namecard"> |
| 49 | + <template> |
| 50 | + <div> |
| 51 | + Hi! My name is <span>Jane</span> |
| 52 | + </div> |
| 53 | + </template> |
| 54 | + |
| 55 | + <script> |
| 56 | + Polymer({ |
| 57 | + is: 'my-simple-namecard' |
| 58 | + }); |
| 59 | + </script> |
| 60 | +</dom-module> |
| 61 | +``` |
| 62 | + |
| 63 | +**Configure properties on your element...** |
| 64 | + |
| 65 | +```js |
| 66 | +// Create an element that takes a property |
| 67 | +Polymer({ |
| 68 | + is: 'my-property-namecard', |
| 69 | + properties: { |
| 70 | + myName: { |
| 71 | + type: String |
| 72 | + } |
| 73 | + }, |
| 74 | + ready: function() { |
| 75 | + this.textContent = 'Hi! My name is ' + this.myName; |
| 76 | + } |
| 77 | +}); |
| 78 | +``` |
| 79 | + |
| 80 | +**...and have them set using declarative attributes** |
| 81 | + |
| 82 | +```html |
| 83 | +<!-- using the element --> |
| 84 | +<my-property-namecard my-name="Jim"></my-property-namecard> |
| 85 | +``` |
| 86 | + |
| 87 | +> Hi! My name is Jim |
| 88 | +
|
| 89 | +**Bind data into your element using the familiar mustache-syntax** |
| 90 | + |
| 91 | +```html |
| 92 | +<!-- define markup with bindings --> |
| 93 | +<dom-module id="my-bound-namecard"> |
| 94 | + <template> |
| 95 | + <div> |
| 96 | + Hi! My name is <span>{{myName}}</span> |
| 97 | + </div> |
| 98 | + </template> |
| 99 | + |
| 100 | + <script> |
| 101 | + Polymer({ |
| 102 | + is: 'my-bound-namecard', |
| 103 | + properties: { |
| 104 | + myName: { |
| 105 | + type: String |
| 106 | + } |
| 107 | + } |
| 108 | + }); |
| 109 | + </script> |
| 110 | +</dom-module> |
| 111 | +``` |
| 112 | + |
| 113 | +```html |
| 114 | +<!-- using the element --> |
| 115 | +<my-bound-namecard my-name="Josh"></my-bound-namecard> |
| 116 | +``` |
| 117 | + |
| 118 | +> Hi! My name is Josh |
| 119 | +
|
| 120 | +**Style the internals of your element, without the style leaking out** |
| 121 | + |
| 122 | +```html |
| 123 | +<!-- add style to your element --> |
| 124 | +<dom-module id="my-styled-namecard"> |
| 125 | + <template> |
| 126 | + <style> |
| 127 | + /* This would be crazy in non webcomponents. */ |
| 128 | + span { |
| 129 | + font-weight: bold; |
| 130 | + } |
| 131 | + </style> |
| 132 | + |
| 133 | + <div> |
| 134 | + Hi! My name is <span>{{myName}}</span> |
| 135 | + </div> |
| 136 | + </template> |
| 137 | + |
| 138 | + <script> |
| 139 | + Polymer({ |
| 140 | + is: 'my-styled-namecard', |
| 141 | + properties: { |
| 142 | + myName: { |
| 143 | + type: String |
| 144 | + } |
| 145 | + } |
| 146 | + }); |
| 147 | + </script> |
| 148 | +</dom-module> |
| 149 | +``` |
| 150 | + |
| 151 | +```html |
| 152 | +<!-- using the element --> |
| 153 | +<my-styled-namecard my-name="Jesse"></my-styled-namecard> |
| 154 | +``` |
| 155 | + |
| 156 | +> Hi! My name is **Jesse** |
| 157 | +
|
| 158 | +**and so much more!** |
| 159 | + |
| 160 | +Web components are an incredibly powerful new set of primitives baked into the web platform, and open up a whole new world of possibility when it comes to componentizing front-end code and easily creating powerful, immersive, app-like experiences on the web. |
| 161 | + |
| 162 | +By being based on Web Components, elements built with Polymer are: |
| 163 | + |
| 164 | +* Built from the platform up |
| 165 | +* Self-contained |
| 166 | +* Don't require an overarching framework - are interoperable across frameworks |
| 167 | +* Re-usable |
| 168 | + |
| 169 | +## Contributing |
| 170 | + |
| 171 | +The Polymer team loves contributions from the community! Take a look at our [contributing guide](CONTRIBUTING.md) for more information on how to contribute. |
| 172 | + |
| 173 | +## Communicating with the Polymer team |
| 174 | + |
| 175 | +Beyond Github, we try to have a variety of different lines of communication available: |
| 176 | + |
| 177 | +* [Blog](https://blog.polymer-project.org/) |
| 178 | +* [Twitter](https://twitter.com/polymer) |
| 179 | +* [Google+ community](https://plus.google.com/communities/115626364525706131031) |
| 180 | +* [Mailing list](https://groups.google.com/forum/#!forum/polymer-dev) |
| 181 | +* [Slack channel](https://bit.ly/polymerslack) |
| 182 | + |
| 183 | +# License |
| 184 | + |
| 185 | +The Polymer library uses a BSD-like license available [here](./LICENSE.txt) |
0 commit comments