use*_*366 7 css polymer polymer-1.0
我试图学习聚合物,但我无法理解如何在版本1.0中设置样式元素.这个例子就是这个..
自定义属性| 说明| 默认---------------- | ------------- | ----------
--paper-tabs-selection-bar-color| 选择栏的颜色|--paper-yellow-a100--paper-tabs| Mixin应用于标签|{}
但我无法理解我使用它,或者我如何使用它.有人可以给我一个基本的例子吗？
提前致谢
cod*_*fin 15
Polymer 1.0引入了自定义CSS属性和自定义CSS mixins的概念.
而不是将元素的内部实现的细节暴露给主题,而是元素作者将一个或多个自定义CSS属性定义为元素API的一部分.
这些自定义属性同样可以定义为其它标准的CSS属性,将自定义的点向下组成DOM树,类似的效果继承
color和font-family.
元素作者预测和暴露每个可能对于将元素作为单独的CSS属性很重要的CSS属性(例如,如果用户需要调整
opacity工具栏标题怎么办？)可能是单调乏味(或不可能)..因此,Polymer中包含的自定义属性垫片包含一个实验性扩展,允许将一包CSS属性定义为自定义属性,并允许将包中的所有属性应用于元素本地DOM中的特定CSS规则.为此,我们引入了一种类似于mixin的功能
var,但允许混合整个袋子.
查看链接以了解更多信息.下面是一个包含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">.--custom-color: red;并使用它们--paper-tab-ink: var(--custom-color);.--paper-tabs-selection-bar-color: blue;或--paper-tabs-selection-bar-color: rgba(0,255,0,0.5);.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;
}