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

我试图学习聚合物,但我无法理解如何在版本1.0中设置样式元素.
这个例子只是显示了这个..

Custom property | Description | Default
—————-|————-|———- --paper-tabs-selection-bar-color | Color for the selection bar |
--paper-yellow-a100 --paper-tabs | Mixin applied to the tabs |
{}

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

提前致谢

解决方法

polymer 1.0引入了自定义CSS属性和自定义CSS mixins的概念.

Custom CSS properties

Rather than exposing the details of an element’s internal
implementation for theming,instead an element author defines one or
more custom CSS properties as part of the element’s API.

These custom properties can be defined similarly to other standard CSS
properties and will inherit from the point of deFinition down the
composed DOM tree,similar to the effect of color and font-family.

Custom CSS mixins

It may be tedious (or impossible) for an element author to anticipate
and expose every possible CSS property that may be important for
theming an element as individual CSS properties (for example,what if
a user needed to adjust the opacity of the toolbar title?).

For this reason,the custom properties shim included in polymer
includes an experimental extension allowing a bag of CSS properties to
be defined as a custom property and allowing all properties in the bag
to be applied to a specific CSS rule in an element’s local DOM. For
this,we introduce a mixin capability that is analogous to var,but
allows an entire bag of properties to be mixed in.

查看链接以了解更多信息.下面是一个包含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.5);.
>许多元素包括预定义的CSS变量.例如,纸张样式包括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;
}

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

解决方法

相关文章