聚合物切换按钮已选中并禁用样式答案

【问题标题】：Polymer toggle button checked and disabled styling聚合物切换按钮已选中并禁用样式
【发布时间】：2017-04-08 12:25:03
【问题描述】：

我正在以编程方式使用 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;
            }

但它似乎不起作用。在禁用时，我坚持使用具有正确选中和未选中状态的切换样式。

因此，我也没有找到任何关于造型禁用聚合物切换的信息。

你能指导我去哪里看吗？

【问题讨论】：

标签： css polymer

【解决方案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,
  }

【讨论】：

非常感谢！而且，顺便说一句，当更改元素默认设置时，它不会在更新项目的依赖项时中断吗？
是的，它会坏掉的。你必须监控元素的版本。

【解决方案2】：

您不应编辑 bower_components 文件夹中的文件，因为您的更改将在更新期间被覆盖。

但是，可以使用 CSS 手动禁用 pointer-events（这是设置 disabled 属性时 PolymerElements/paper-toggle-button 所做的事情）以获得您想要的效果。

你可以试试：

    paper-toggle-button {
            /* Toggle Button acts as disabled but still retains coloring. */
            pointer-events: none;
            /* Apply whatever custom styling you want here (if you still need to). */
            --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> 标记中删除disabled 属性。

【讨论】：