我正在尝试学习如何使用聚合物和网络组件,但我遇到了这个问题,我找不到任何解决方案。
我正在开发自己的 Web 组件,但我不知道动态设置特定类。
这是我调用组件的方式
<custom-toogle label="my label" class="blue" checked></custom-toogle>
这是我的网络组件
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<dom-module id="custom-toogle">
<style>
label {
display: block;
font-weight: bold;
color: #333;
}
paper-toggle-button.blue {
--paper-toggle-button-checked-bar-color: #B3E5FC;
--paper-toggle-button-checked-button-color: #0288D1;
--paper-toggle-button-unchecked-bar-color: #B6B6B6;
--paper-toggle-button-unchecked-button-color: #727272;
}
</style>
<template>
<label>{{label}}</label>
<paper-toggle-button id="toggleButton"></paper-toggle-button>
</template>
<script>
Polymer({
is: "custom-toogle",
properties: {
label: {
type: String,
value: null
},
checked: {
type: Boolean,
value: false
},
class: {
type: String,
value: 'blue'
}
},
ready: function(){
var e = document.getElementById("toggleButton");
if(this.checked) {
e.checked = true;
}
e.className += e.className + " " + this.class;
}
});
}
</script>
</dom-module>
当我这样做时,蓝色类不应用,但如果我做一个控制台.log(e.classList),"蓝色"类在列表中。
我也尝试在我的元素中做到这一点
<paper-toggle-button id="toggleButton" class="{{class}}"></paper-toggle-button>
它不起作用。
如何动态设置类?
谢谢!
要获取聚合物元素中元素的 id,请使用 this.$.elementId
。试试这个:
var e = this.$.toggleButton;
要更改类,您需要使用 class$ 而不是类
<paper-toggle-button id="toggleButton" class$="{{class}}"></paper-toggle-button>
我在这里的文档中找到了这个:https://www.polymer-project.org/1.0/docs/devguide/data-binding.html