Question

我正在尝试学习Polymer，但我无法理解如何在1.0版中设置样式元素。这个例子只是显示了这个..

自定义属性|说明|默认 ---------------- | ------------- | ---------- --paper-tabs-selection-bar-color |选择栏的颜色| --paper-yellow-a100 --paper-tabs | Mixin应用于标签| {}

但我无法理解我使用它，或者我如何使用它。有人可以给我一个基本的例子吗？

提前致谢

Answer 1

Polymer 1.0引入了自定义CSS属性和自定义CSS mixins的概念。

Custom CSS properties

而不是暴露元素内部的细节   主题的实现，而不是元素作者定义一个或   更多自定义CSS属性作为元素API的一部分。

可以与其他标准CSS类似地定义这些自定义属性   属性并将从定义点继承下来   组合DOM树，类似于color和font-family的效果。

Custom CSS mixins

元素作者预期可能是乏味的（或不可能的）   并公开可能重要的每个可能的CSS属性   将元素作为单独的CSS属性（例如，如果   用户需要调整工具栏标题的opacity吗？）。

因此，Polymer中包含自定义属性垫片   包括允许一袋CSS属性的实验扩展   被定义为自定义属性并允许包中的所有属性   要应用于元素的本地DOM中的特定CSS规则。对于   这个，我们引入了一个类似于var的mixin功能，但是   允许整个袋子混合在一起。

查看链接以了解更多信息。您将在下面找到一个包含paper-tabs元素和自定义样式的简单示例。

<!DOCTYPE html>
<html>
<head>
    <title>Paper Tabs Style 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-tabs/paper-tabs.html" />
    <style is="custom-style">
        :root {
            --my-custom-color: red;
            --paper-tab-ink: var(--my-custom-color);

            /* custom CSS property */
            --paper-tabs-selection-bar-color: blue;

            /* custom CSS mixin */
            --paper-tabs: {
                color: var(--default-primary-color); /* variable defined in default-theme.html */
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <paper-tabs selected="0">
        <paper-tab>TAB 1</paper-tab>
        <paper-tab>TAB 2</paper-tab>
        <paper-tab>TAB 3</paper-tab>
    </paper-tabs>
</body>
</html>

此示例的关键部分：

对于主文档中的样式，您可以使用<style is="custom-style">。
您可以创建自己的自定义CSS变量，例如--custom-color: red;，并像--paper-tab-ink: var(--custom-color);一样使用它们。
您可以将任何有效的，合适的CSS分配给定义的自定义CSS属性，例如--paper-tabs-selection-bar-color: blue;或--paper-tabs-selection-bar-color: rgba(0,255,0,0.5);。
许多元素包括预定义的CSS变量。例如，paper-styles包括color.html和default-theme.html。这些文件定义了可用于自定义元素样式的颜色的各种CSS变量。 --default-primary-color是这些变量之一。见下文。

/* custom CSS mixin */
--paper-tabs: {
    color: var(--default-primary-color); /* variable defined in default-theme.html */
    font-size: 20px;
}

如何改变纸张的颜色riple效果

1 个答案: