Geek Answers Handbook

Using Paper-styles Polymer 1.0

Unfortunately, I found current documentation / examples for using paper styles that are a bit lacking. I'm not an experienced CSS guy (actually a relative newbie), so I could really use examples of how to embed a Polymer 1.0 application style for use by all its user elements (for example, applying classes to any tags in these local DOMs of user elements). I did this quite easily in Polymer 0.5, using basic styles, but it changed enough in 1.0 to confuse me, especially without full-fledged documents / examples for work. It also seems that there can be several ways to do this. I am also wondering if paper styles are still considered experimental in 1.0? There are no documents or examples for use in the 1.0 online catalog directory ( https://elements.polymer-project.org/elements/paper-styles ), although I met "some" of the gitHub repository in it.

+6
source share
2 answers

One thing you can do when there is no documentation is to search for other projects that use the code you would like to use. paper-tabs , for example, uses paper-styles . You can see an example of importing paper-styles/color.html in paper-tabs.html . The value --paper-yellow-a100 used in paper-tabs.html . The following is an example of using various CSS ( var ) and mixins ( @apply ) @apply defined in paper-styles to apply style to the main document.

 <!DOCTYPE html> <html> <head> <title>paper-styles Example</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html" /> <link rel="import" href="bower_components/paper-styles/paper-styles.html" /> <style is="custom-style"> .shadow { @apply(--shadow-elevation-16dp); } section { background-color: var(--google-blue-700); } p { @apply(--paper-font-display3); } </style> </head> <body> <section class="shadow"> <h1>Example</h1> <p> This is an example using <em>paper-styles</em>. </p> </section> </body> </html>

Click here to learn more about styling in Polymer 1.0.


Regarding your question about paper style experiments, the home page in the catalog section says:

Custom elements created by the Polymer team are ready to use in your applications.

However, in various places on the site, including styling , experimental features are mentioned.

custom properties included with Polymer include experimental extension

Using @apply will be considered experimental at this time.

The Polymer website has an Experimental Features and Elements page that you can look at for more information.

+4
source

It seems that a common misunderstanding is that simply by importing a paper-styles element, the document is formatted according to the material specifications. This is not the case.

You just get all the variables and mixins .

Then you need to apply them to each element inside your custom element as you see it.

Here is an example:

 <dom-module id="demo-element"> <template> <style> :host { display: block; background: var(--paper-blue-500); padding: 20px; } .title { @apply(--paper-font-title); } button { @apply(--paper-font-button); } </style> <h1 class="title">Hello World</h1> <button>Demo</button> </template> <script> Polymer({ is: 'demo-element' }); </script> </dom-module>

Fortunately, the styles are well structured inside just four files , each of which has just a couple of hundred lines.

+5
source

More articles:


All Articles