Polymer 1.0纸张样式元素的用法 [英] Usage of Polymer 1.0 paper-styles Element
问题描述
不幸的是，我发现当前缺少一些使用纸张样式的文档/示例.我不是一个经验丰富的CSS专家(实际上是相对的新手)，因此我可以使用示例来演示如何实现Polymer 1.0应用程序范围内的样式，以便被其所有自定义元素使用(例如，通过将类应用到这些自定义元素的本地DOM).我在使用核心样式的Polymer 0.5中相对容易地做到了这一点，但是在1.0中它已经发生了足够的变化，使我感到困惑，尤其是在没有完整的文档/示例可供使用的情况下.似乎也有几种方法可以实现此目的.我还想知道纸张样式在1.0中是否仍被认为是实验性的?在Polymer 1.0在线元素目录( https://elements.polymer-project中，没有适用的文档或示例. org/elements/paper-styles )，尽管我确实在gitHub存储库中碰到了一些".
Unfortunately, I'm finding the current documentation/examples for the usage of paper-styles a bit lacking. I'm not an experienced CSS guy (relative newbie actually), so I could really use examples of how to implement Polymer 1.0 application-wide styling in order to be used by all of it's custom elements (i.e. by applying classes to any tags in those custom element's local DOMs). I did this kind of thing relatively easily in Polymer 0.5 using core-styles, but it has changed enough in 1.0 to confuse me, particularly without full docs/examples to work from. It also seems there may be a few ways to accomplish this. I'm also wondering if paper-styles is still considered experimental in 1.0? There are no docs or examples for it's use in polymer 1.0 online element catalog (https://elements.polymer-project.org/elements/paper-styles), although I did come across 'some' on it's gitHub repository.
推荐答案
缺少文档时，您可以做的一件事就是搜索使用您要使用的代码的其他项目.例如，paper-tabs使用paper-styles.您可以在paper-tabs.html中看到导入paper-styles/color.html的示例. paper-tabs.html中正在使用值--paper-yellow-a100.下面是使用paper-styles中定义的各种CSS变量(var)和mixins(@apply)将样式应用于主文档的示例.
One thing you can do when documentation is lacking is search through other projects that are using the code you would like to use. paper-tabs, for example, uses paper-styles. You can see an example import of paper-styles/color.html in paper-tabs.html. The value --paper-yellow-a100 is being used in paper-tabs.html. Below is an example of using various CSS variables (var) and mixins (@apply) defined in paper-styles to apply style to the main document.
<!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>
关于纸张样式是否具有实验性的问题，请在目录部分的聚合物主页上
Concerning your question about paper-styles being experimental, on the Polymer home page in the catalog section it states:
由Polymer团队构建的自定义元素，可随时用于您的 应用程序.
Custom elements, built by the Polymer team, ready to use in your applications.
However, in various locations on the site, including styling, there are mentions of experimental features.
Polymer中包含的自定义特性垫片包括 实验性扩展
the custom properties shim included in Polymer includes an experimental extension
这时使用@apply被认为是实验性的.
At this time using @apply would be considered experimental.
Polymer网站上有一个网页，标题为实验功能和功能；元素，您可以查看更多信息.
There is a page on the Polymer website titled Experimental features & elements you can look at for more information.
这篇关于Polymer 1.0纸张样式元素的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
