css - 选中 polymer 切换按钮并禁用样式

Question

我以编程方式使用 Polymer Toggle Button，因此用户无法与其交互。勾选和未勾选状态是根据一些函数设置的。所有这部分工作完美，但造型。

我尝试了以下方法:

paper-toggle-button[disabled]{
                --paper-toggle-button-checked-button-color: red;
                --paper-toggle-button-checked-bar-color: red;
                --paper-toggle-button-checked-ink-color: red;
                color: white;
                text-transform: uppercase;
            }
paper-toggle-button[checked][disabled]{
                --paper-toggle-button-checked-button-color: red;
                --paper-toggle-button-checked-bar-color: red;
                --paper-toggle-button-checked-ink-color: red;
                color: red;
            }

但是好像不行。当它被禁用时，我一直坚持使用具有适当选中和未选中状态的切换样式。

因此，我也没有找到任何关于设计禁用 polymer 肘节的信息。

你能指导我在哪里看吗？

Answer 1

您需要更改元素默认设置。

paper-toggle-button/paper-toggle-button.html

  :host([disabled]) .toggle-bar {
    background-color: #000;
    opacity: 0.12;
  }

  :host([disabled]) .toggle-button {
    background-color: #bdbdbd;
    opacity: 1;
  }

您还可以手动设置检查器状态以复制禁用效果并使用类作为样式。

    <paper-toggle-button 
      class='toggleDisabled' 
      checked 
      active='{{alwaysTrue}}'></paper-toggle-button>

  count: {
    type: NuBooleanber,
    readOnly: true,
  }