2017-10-08 5 views
0

カラーテーマサイトを作成するには、角度のある素材が最適です。同様に、通常のパレットである、あなたは、任意の要素のテーマカラーを設定する...AngularJSマテリアルデザイン - ボタンホバーのmdカラー

md-colors="{background:'primary'}" 

...のようなディレクティブを使用して、SCSSせずに、動的テーマを作成することができます。このような数行のコードを使用すると、簡単にサイト全体の色を変更することができ、またはデータから動的に設定します。

.config(function($mdThemingProvider) { 
    var color = 'pink'; 
    $mdThemingProvider.theme('dark') 
     .primaryPalette(color) 
     .dark() 
     ; 

私のサイトはホバー状態を必要とするいくつかのカスタム要素、および理想的なものを持っていますこれらの光をアクセントの色や原色で点灯させることです。 md-色などをホバー州に適用する方法はありますか?

マイ従来のホバー状態はもちろん、CSSで次のようになります。ここでは

.post a:hover{ 
    background-color:#f00; 
} 

は、あなたが一緒にプレイするために設定codepenです:https://codepen.io/anon/pen/PJRzOQ

+1

あなたは[これを!]チェックすることができます(https://stackoverflow.com/questions/39587156/md-color-set-hover-color) –

答えて

0

誰もがMDを使用するために必死である場合ホバー状態の色は、文書によれば不可能です。しかし、私は背景色をmd色で設定し、別の要素の後ろに隠すことで回避策を作成しました。ホバー状態は、最上位層を透明にするので、動的に設定されたホバー状態であるように見えます。あなたがここでの例を見ることができます

https://codepen.io/anon/pen/oGqPeE

をHTMLレイアウトは次のようになります。

<ul ng-if="link" md-theme="myTheme"> 
<li ng-repeat="linkObj in link" md-colors="{background:'primary'}"> 
    <a ng-href="{{linkObj.link_url}}" target="_blank" md-colors="{background:'accent'}">   <span ng-bind="linkObj.link_title" md-colors="{color:'accent'}"></span> 
    </a> 
</li> 
</ul> 
関連する問題