个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
26
4
我正在尝试学习 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 |{}
但我无法理解我在哪里使用它，或者我如何使用它。有人可以给我一个基本的例子吗？
提前致谢
最佳答案
Polymer 1.0 引入了自定义 CSS 属性和自定义 CSS 混合的概念。
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
colorandfont-family.
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
opacityof 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"> .--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;
}
关于css - 如何改变纸标签波纹效果的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31480143/
26
4
0
如何以编程方式将 TextView 背景设置为 xml/ripple？ xml/ripple.xml: 我尝试了
我正在开发 Material Design 界面。我有一些卡片，我希望在单击时产生链式 react 。我已经按照谷歌所说的做了，但没有任何反应。这是我的代码: >
我试图将 FloatingActionButton 波纹设置为类似于 this 来自 Material 设计。 问题是我只得到一个没有波纹的“平面样式”，它只是将按钮从白色更改为橙色，而没有上面链
想象一下我有这么长的一段文字:HELLO THIS IS MY LONG SENTENCE。当我点击它时，我希望 LONG 这个词产生波纹(墨水溅起)。 假设我有这个代码: new RichText(
有人知道 Ripple 是否适用于最新的cordova 版本？因为我正在尝试，我什至无法启动控制面板。当我尝试不使用它时，会弹出一些“警报”: 差距:[“插件管理器”，“启动”，“插件管理器59084
我正在使用 google maps API，我试图让他们的交互式 map 通过 PhoneGap 工作，然后我通过 Ripple 模拟它。 我完全复制了这个教程: http://www.christi
在 Jetpack 中撰写 clickable修饰符默认使用 LocalIndication.current并显示一个绑定(bind)到边界的波纹。这看起来几乎总是很棒，但在某些情况下，圆形的、未绑定
我有一个项目列表(每个项目都包含多个元素)，其中每个项目都可以单击并切换 View 。有没有办法对整个md-item-content产生链式 react ？我尝试了 class="ripple" 但这
我正在为我的移动应用程序项目使用 jquery、backbonejs、underscorejs 和 bootstrap 3。我在 ripple 中运行我的应用程序。有时我的控制台会出现这个愚蠢的错误。
我是一名优秀的程序员,十分优秀！