Polymer 1.0 paper-styles 元素的使用

Question

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

Answer 1

当缺少文档时，您可以做的一件事是搜索使用您想要使用的代码的其他项目。 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.

关于您关于 paper-styles 处于试验阶段的问题，在 Polymer home page in the catalog section 上它指出：

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

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

the custom properties shim included in Polymer includes an experimental extension

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

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

Answer 2

普遍的误解似乎是，只要导入 paper-styles 元素，文档就会根据 material 设计规范进行样式设置。事实并非如此。

你只需要得到所有的变量和mixin。

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

这是一个示例元素：

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

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

Polymer 1.0 paper-styles 元素的使用

Usage of Polymer 1.0 paper-styles Element

polymer

paper-elements

polymer-1.0