sin*_*ins 6 polymer paper-elements polymer-1.0
不幸的是,我发现当前的文档/示例中使用的纸张样式有点缺乏.我不是一个经验丰富的CSS人(实际上是相对新手),所以我真的可以使用如何实现Polymer 1.0应用程序范围样式的示例,以便被所有自定义元素使用(即通过将类应用于任何标签)那些自定义元素的本地DOM).我在Polymer 0.5中使用核心样式相对容易地做了这种事情,但它在1.0中已经改变得足以让我迷惑,特别是没有完整的文档/示例.似乎可能有几种方法可以实现这一目标.我也想知道纸张样式在1.0中是否仍然被认为是实验性的？在聚合物1.0在线元素目录(https://elements.polymer-project.org/elements/paper-styles)中没有使用文档或示例,尽管我在它的gitHub存储库中遇到了'some'.
一般的误解似乎是,只需导入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>
幸运的是,这些样式只在四个文件中很好地构建,每个文件最多只有几百行.
当缺乏文档时，您可以做的一件事是搜索正在使用您想要使用的代码的其他项目。 paper-tabs，例如，使用paper-styles. paper-styles/color.html您可以查看in的导入示例paper-tabs.html。该值--paper-yellow-a100正在使用中paper-tabs.html。下面是使用定义的各种 CSS 变量 ( var) 和 mixins ( )将样式应用到主文档的示例。@applypaper-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>
单击此处了解有关 Polymer 1.0 中的样式的更多信息。
关于您关于实验性纸张样式的问题，在聚合物主页的目录部分中指出：
自定义元素由 Polymer 团队构建，可在您的应用程序中使用。
然而，在网站的各个位置，包括样式，都提到了实验性功能。
Polymer 中包含的自定义属性垫片包含一个实验性扩展
此时使用@apply将被视为实验性的。
Polymer 网站上有一个名为“实验功能和元素”的页面，您可以查看以获取更多信息。