聚合物切換按鈕檢查和禁用樣式

我使用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; 
      }

但它似乎並沒有工作。我被困在正確的選中狀態和未選中的狀態下，而禁用狀態。

因此，我還沒有找到關於造型殘疾聚合物切換的任何信息。

你能指導我在哪裏看？

來源

2017-04-08 Alexandra Lutikova

您需要更改元素的默認設置。

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

來源

2017-04-09 00:26:26

非常感謝！而且，順便說一下，當更改元素的默認設置不會中斷更新項目的依賴關係嗎？ –

是的，它會中斷。您必須監視元素的版本。 –

你不應該編輯文件的bower_components出於某種原因，你的更改將在更新過程中被覆蓋文件夾。

但是，可以使用CSS（這是PolymerElements/paper-toggle-button在設置disabled屬性時執行的操作）手動禁用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屬性。

來源

2017-07-28 23:37:48

聚合物切換按鈕檢查和禁用樣式

回答

相關問題