ポリマートグルボタンがチェックされ、スタイリングが無効にされました

Question

私はポリマートグルボタンをプログラムで使用しています。チェックされた状態と未チェックの状態は、いくつかの機能によって設定されます。この部分はすべて完璧に動作しますが、スタイリングします。

私は次のことを試してみた：

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あなたの変更は、更新時に上書きされます非常に理由でフォルダをファイルを編集することはありません。

ただし、無効な属性が設定されている場合はPolymerElements/paper-toggle-buttonが行っているCSSを使用して、pointer-eventsを手動で無効にすることができます。

あなたは試みることができる：

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属性を削除することを忘れないでください。