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

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

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

    <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 所做的）以获得效果你想要的。

你可以试试：

    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 属性。

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

Polymer toggle button checked and disabled styling

css

polymer