[英]Styling Polymer paper-slider
So I'm essentially wrapping the standard paper-slider
element with a custom element, and wanting to include some styling. 所以我基本上用自定义元素包装标准
paper-slider
元素,并希望包含一些样式。 Below is what I currently have: 以下是我目前的情况:
<dom-module id="my-slider">
<template>
<style>
/* Works */
paper-slider {
--paper-slider-active-color: red;
--paper-slider-knob-color: red;
--paper-slider-height: 3px;
}
/* Doesn't work */
paper-slider #sliderContainer.paper-slider {
margin-left: 0;
}
/* Also doesn't work */
.slider-input {
width: 100px;
}
</style>
<div>
<paper-slider editable$="[[editable]]" disabled$="[[disabled]]" value="{{value}}" min="{{min}}" max="{{max}}"></paper-slider>
</div>
</template>
<script>
Polymer({
is: "my-slider",
properties: {
value: {
type: Number,
value: 0,
reflectToAttribute: true
},
min: {
type: Number,
value: 0
},
max: {
type: Number,
value: 100
},
editable: Boolean,
disabled: Boolean
}
});
</script>
</dom-module>
JSFiddle: https://jsfiddle.net/nhy7f8tt/ JSFiddle: https ://jsfiddle.net/nhy7f8tt/
Defining the variables that the paper-slider
uses works as expected, but when I try to address anything inside of it directly via its selector, it doesn't work. 定义
paper-slider
使用的变量按预期工作,但是当我尝试通过其选择器直接解决其中的任何内容时,它不起作用。
I'm fairly new to Polymer, so this may be a very simple/stupid question, but I'm really quite confused and would greatly appreciate any help! 我对Polymer很新,所以这可能是一个非常简单/愚蠢的问题,但我真的很困惑,非常感谢任何帮助!
A secondary (but related) issue is the clipping of the input to the right of the editable paper-slider
element when the value is 100. 次要(但相关)问题是当值为100时剪辑输入到可编辑
paper-slider
元素的右侧。
You could use selectors like ::shadow
and /deep/
but they are deprecated. 您可以使用像
::shadow
和/deep/
这样的选择器,但不推荐使用它们。 If an element doesn't provide the hooks (CSS variables and mixins) then you're basically out of luck. 如果一个元素没有提供钩子(CSS变量和mixins)那么你基本上没有运气。
What you can do, is to create a feature request in the elements GitHub repo to support additional selectors. 你可以做的是在元素GitHub repo中创建一个功能请求,以支持其他选择器。
Another workaround I already used successfully is to add a style module . 我已成功使用的另一种解决方法是添加样式模块 。
var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'mySharedStyleModuleName');
Polymer.dom(sliderElem.root).appendChild(myDomModule);
I hope the syntax is correct. 我希望语法是正确的。 I use Polymer only with Dart.
我只在Dart中使用Polymer。 The dom-module needs to be a
custom-style
even though this is normally only necessary when used outside a Polymer element. dom-module需要是
custom-style
即使这通常仅在Polymer元素外部使用时才需要。
See also https://github.com/Polymer/polymer/issues/2681 about issues I run into with this approach. 有关我使用此方法遇到的问题,另请参阅https://github.com/Polymer/polymer/issues/2681 。
The following code is working for me, 以下代码对我有用,
attached: function(){
var sliderContainer = document.querySelector("#sliderContainer.editable.paper-slider");
sliderContainer.style.marginTop = "5px";
sliderContainer.style.marginBottom = "5px";
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.