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;
            }

但它似乎不起作用。当它被禁用时，我坚持使用正确的已检查和未检查状态进行样式切换。

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

你能指导我去哪儿吗？

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,
  }

Answer 2

您永远不应编辑 bower_components 文件夹中的文件，原因是更新过程中您的更改将被覆盖。

但是，可以使用CSS手动禁用pointer-events（这是PolymerElements/paper-toggle-button在设置disabled属性时正在执行的操作），以获得所需的效果。

你可以尝试：

    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;
    }

请务必从disabled标记中删除<paper-toggle-button>属性。

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

2 个答案: