Polymer 聚合物1.0纸张样式元素的使用
不幸的是，我发现目前关于纸张样式使用的文档/示例有点缺乏。我不是一个有经验的CSS专家（实际上是一个新手），所以我可以用一些例子来说明如何实现Polymer 1.0应用程序范围的样式，以便它的所有自定义元素都能使用（例如，通过将类应用到这些自定义元素的本地域中的任何标记）。我在Polymer 0.5中使用core样式相对容易地完成了这类工作，但在1.0中它的变化足以让我感到困惑，尤其是在没有完整文档/示例的情况下。似乎还有一些方法可以做到这一点。我还想知道纸张样式在1.0中是否仍被认为是实验性的？polymer 1.0 online element catalog（）中没有使用它的文档或示例，尽管我在它的gitHub存储库中遇到了“一些”。当缺少文档时，可以做的一件事是搜索使用您想要使用的代码的其他项目<例如，代码>纸张选项卡使用Polymer 聚合物1.0纸张样式元素的使用,polymer,polymer-1.0,paper-elements,Polymer,Polymer 1.0,Paper Elements,不幸的是，我发现目前关于纸张样式使用的文档/示例有点缺乏。我不是一个有经验的CSS专家（实际上是一个新手），所以我可以用一些例子来说明如何实现Polymer 1.0应用程序范围的样式，以便它的所有自定义元素都能使用（例如，通过将类应用到这些自定义元素的本地域中的任何标记）。我在Polymer 0.5中使用core样式相对容易地完成了这类工作，但在1.0中它的变化足以让我感到困惑，尤其是在没有完整文档/示例的情况下。似乎还有一些方法可以做到这一点。我还想知道纸张样式在1.0中是否仍被认为是实验性的
纸张样式纸张选项卡.html纸张样式/color.html--paper-yellow-a100paper tabs.html纸张样式var@apply<!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>
纸张样式示例
.影子{
@应用（--shadow-elevation-16dp）；
}
部分{
背景色：var（--google-blue-700）；
}
p{
@应用（--paper-font-display3）；
}
例子
这是一个使用纸张样式的示例。
关于您提出的关于纸张样式正在进行实验的问题，it上指出： 由Polymer团队打造的定制元素，随时可用于您的 应用程序 然而，在网站的各个位置，包括，都提到了实验特征 聚合物中包含的自定义特性垫片包括 实验扩展 此时，使用
@applyPolymer网站上有一个名为“您可以查看以获取更多信息”的页面。一般的误解似乎是，只需导入
纸张样式<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>
：主持人{
显示：块；
背景：var（--纸蓝-500）；
填充：20px；
}
.title{@apply（--纸张字体标题）；}
按钮{@apply（--纸张字体按钮）；}
你好，世界
演示
聚合物({
是：“演示元素”
});
幸运的是，这些样式在内部结构良好，只有四个文件，每个文件最多只有几百行。
纸张样式应用程序主题.html