AngularJSマテリアルを作成する方法menuesをより目立たせるには？

Question

私はAngularJS Materialsで遊んでいて、とを使っていました。私は、テキストがどれほど明るくて、背景を変えずに見えるようにするために、一部の人々のために読むのが本当に難しいかもしれないことに気付きました。

私は、CSSでこれをプレーンテキストの色を作るために管理：

md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder{ 
    color: black; 
} 

私は必ずしもそれを暗くする必要はありませんが、ドロップを作成する方法のいずれかの種類があった場合、私は思っていましたAngularJS Materialsのドロップダウンメニューが表示されますか？

Answer 1

md-menu-itemをオーバーライドすることで、テキストカラーを変更できます。これはおそらく重要な特定のクラスを必要とするので、材料設計を無効にするためにいくつかの取り組みが必要です。

md-menu-content.md-default-theme md-menu-item, md-menu-content md-menu-item { 
    color: some color 
} 

$ mdThemeProviderは、あなたがそれについてそのように行きたい場合は、それらを変更するために動作するはずですので、彼らは、ドロップダウンの内側のボタンです。これらの材料の元素（あなたのケースではMD-ボタン）のいずれかにを

だけで、クラスMD-主要を追加MD-アクセント、またはMD-警告： MD-ボタン、MD-チェックボックス、 md-progress-linear、md-progress-linear、md-radio-button、md-slider、md-switch、md-tabs、md-input-container、md-toolbar

ボタンにmd-raisedを追加する.md-primaryが色効果を反転させるので、.md-primary.md-raisedは背景を青色にし、テキストを白にします。

<md-menu> 
    <md-button ng-class="md-raised" ng-click="$mdOpenMenu($event)" aria-label="Open sample menu"> 
     test menu 
    </md-button> 
    <md-menu-content> 
     <md-menu-item> 
     // 
     //add md-primary on the button for blue text 
     //change $mdThemeProvider if you want the color to be different 
     // 
     <md-button class="md-primary" ng-click="doSomething()">Do Something</md-button> 
     </md-menu-item> 
    </md-menu-content> 
    </md-menu> 

https://material.angularjs.org/latest/Theming/02_declarative_syntax

EDIT：MD-メニューの作業スニペット

var app = angular.module('sandbox', ['ngMaterial']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script> 
 

 
<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/> 
 

 
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script> 
 

 
<div ng-app="sandbox"> 
 
    <div layout-margin> 
 
    <div layout="row"> 
 
     <md-menu> 
 
     <!-- Trigger element is a md-button with an icon --> 
 
     <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu" class="md-raised"> 
 
      test menu 
 
     </md-button> 
 
     <md-menu-content> 
 
      <md-menu-item> 
 
      <md-button class="md-primary" ng-click="doSomething()">Do Something</md-button> 
 
      </md-menu-item> 
 
     </md-menu-content> 
 
     </md-menu> 
 
    </div> 
 
    </div> 
 
</div>

第二EDIT：

OPが実際にMD-にラベル話していました選択します。

これはCSS操作でのみ変更できます。

あなたがしたい場合は今、しかし、角度、材料が実際にそれのラベルとして最初のMD-の選択値を置く

<md-input-container class=""> 
    <label for="select_5" class="md-placeholder">Drop Down Tester</label> 
    <md-select ng-model="selectedUser" class="ng-pristine ng-valid ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_5" aria-owns="select_container_6" aria-invalid="false" aria-label="Drop Down Tester"> 
     <md-select-value class="md-select-value md-select-placeholder" id="select_value_label_0"> 
      <span>Drop Down Tester</span> 
      <span class="md-select-icon" aria-hidden="true"></span> 
     </md-select-value> 
    </md-select> 
</md-input-container> 

だけ

md-input-container label { 
    some color  
} 

を変更することが当然の選択のように見えるかもしれません

md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder { 
    color: green; 
} 

これで、下線や上書きは変わりませんide md-primaryまたは他のスタイリング、アクションがゼロのプレースホルダのみ。

var app = angular.module('sandbox', ['ngMaterial']);

md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder { 
 
    color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script> 
 

 
<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/> 
 

 
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script> 
 

 
<body ng-app="sandbox"> 
 
    <md-content class="md-padding"> 
 
    <md-input-container> 
 
     <label>Drop Down Tester</label> 
 
     <md-select ng-model="selectedUser"> 
 
     <md-option>Hello</md-option> 
 
     <md-option>Please Change Color</md-option> 
 
     <md-option>Pls</md-option> 
 
     <md-option>Do it for your mother Mr.Select</md-option> 
 
     </md-select> 
 
    </md-input-container> 
 
    </md-content> 
 
</body>