Question

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

Answer 1

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

您只需获取所有变量和混合。

然后，您需要将它们应用于自定义元素中的每个元素，就像您认为它适合一样。

以下是一个示例元素：

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

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

Answer 2

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

<!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中包含的自定义属性垫片包括实验性延伸

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

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

Polymer 1.0纸张样式元素的用法

2 个答案: