Polymer 1.0 纸张样式元素的使用答案

【问题标题】：Usage of Polymer 1.0 paper-styles ElementPolymer 1.0 纸张样式元素的使用
【发布时间】：2015-07-16 21:51:19
【问题描述】：

不幸的是，我发现当前使用纸张样式的文档/示例有点欠缺。我不是一个有经验的 CSS 人（实际上是相对新手），所以我真的可以使用示例来说明如何实现 Polymer 1.0 应用程序范围的样式，以便被所有自定义元素使用（即通过将类应用于那些自定义元素的本地 DOM）。我在 Polymer 0.5 中使用核心样式相对容易地完成了这种事情，但是在 1.0 中它已经发生了足够的变化，让我感到困惑，特别是没有完整的文档/示例可供使用。似乎也有几种方法可以实现这一点。我还想知道纸张样式在 1.0 中是否仍被认为是实验性的？尽管我在它的 gitHub 存储库中确实遇到了“一些”，但没有在聚合物 1.0 在线元素目录 (https://elements.polymer-project.org/elements/paper-styles) 中使用它的文档或示例。

【问题讨论】：

paper-styles 与app-theme.html 文件类似。您只需将其导入您的项目，它定义的自定义属性将被应用和/或可以使用。

标签： polymer polymer-1.0 paper-elements

【解决方案1】：

一般的误解似乎是，仅通过导入 paper-styles 元素，文档就会根据材料设计规范进行样式设置。事实并非如此。

您只需获取所有变量和 mixins。

然后您需要按照您认为合适的方式将它们应用于自定义元素中的每个元素。

这是一个示例元素：

<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>

幸运的是，样式在只有四个文件中结构很好，每个文件最多只有几百行。

【讨论】：

【解决方案2】：

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

<!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.

关于您关于纸张样式的实验性问题，Polymer home page in the catalog section 指出：

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

但是，在网站的不同位置，包括styling，都提到了实验性功能。

Polymer 中包含的自定义属性 shim 包括实验性扩展

此时使用@apply 将被视为实验性的。

Polymer 网站上有一个标题为 Experimental features & elements 的页面，您可以查看更多信息。

【讨论】：