Polymer 1.0纸张样式元素的用法

问题描述：

不幸的是，我发现当前缺少一些使用纸张样式的文档/示例.我不是一个经验丰富的CSS专家(实际上是相对的新手)，因此我可以使用示例来演示如何实现Polymer 1.0应用程序范围内的样式，以便被其所有自定义元素使用(例如，通过将类应用到这些自定义元素的本地DOM).我在使用核心样式的Polymer 0.5中相对容易地做到了这一点，但是在1.0中它已经发生了足够的变化，使我感到困惑，尤其是在没有完整的文档/示例可供使用的情况下.似乎也有几种方法可以实现此目的.我还想知道纸张样式在1.0中是否仍被认为是实验性的?在Polymer 1.0在线元素目录( https://elements.polymer-project中，没有适用的文档或示例. org/elements/paper-styles )，尽管我确实在gitHub存储库中碰到了一些".

Unfortunately, I'm finding the current documentation/examples for the usage of paper-styles a bit lacking. I'm not an experienced CSS guy (relative newbie actually), so I could really use examples of how to implement Polymer 1.0 application-wide styling in order to be used by all of it's custom elements (i.e. by applying classes to any tags in those custom element's local DOMs). I did this kind of thing relatively easily in Polymer 0.5 using core-styles, but it has changed enough in 1.0 to confuse me, particularly without full docs/examples to work from. It also seems there may be a few ways to accomplish this. I'm also wondering if paper-styles is still considered experimental in 1.0? There are no docs or examples for it's use in polymer 1.0 online element catalog (https://elements.polymer-project.org/elements/paper-styles), although I did come across 'some' on it's gitHub repository.

答

缺少文档时，您可以做的一件事就是搜索使用您要使用的代码的其他项目.例如，paper-tabs使用paper-styles.您可以在paper-tabs.html中看到导入paper-styles/color.html的示例. paper-tabs.html中正在使用值--paper-yellow-a100.下面是使用paper-styles中定义的各种CSS变量(var)和mixins(@apply)将样式应用于主文档的示例.

One thing you can do when documentation is lacking is search through other projects that are using the code you would like to use. paper-tabs, for example, uses paper-styles. You can see an example import of paper-styles/color.html in paper-tabs.html. The value --paper-yellow-a100 is being used in paper-tabs.html. Below is an example of using various CSS variables (var) and mixins (@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>

单击此处以了解有关Polymer 1.0样式的更多信息.

关于纸张样式是否具有实验性的问题，请在目录部分的聚合物主页上它说:

Concerning your question about paper-styles being experimental, on the Polymer home page in the catalog section it states:

由Polymer团队构建的自定义元素，可随时用于您的应用程序.

Custom elements, built by the Polymer team, ready to use in your applications.

但是，在网站的各个位置，包括

However, in various locations on the site, including styling, there are mentions of experimental features.

Polymer中包含的自定义特性垫片包括实验性扩展

the custom properties shim included in Polymer includes an experimental extension

这时使用@apply被认为是实验性的.

At this time using @apply would be considered experimental.

Polymer网站上有一个网页，标题为实验功能和功能；元素，您可以查看更多信息.

There is a page on the Polymer website titled Experimental features & elements you can look at for more information.

Polymer 1.0纸张样式元素的用法

相关推荐