如何改变纸标签波纹效果的颜色

Question

我正在尝试学习 Polymer，但我无法理解如何在 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 | {}

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

提前致谢

Answer 1

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

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,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;
}

如何改变纸标签波纹效果的颜色

How to change color of paper-tabs riple effect

css

polymer

polymer-1.0