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材料的下拉菜单更加明显？

Answer 1

您可以通过覆盖md-menu-item来更改textcolor。这将需要一些麻烦，因为您可能需要重要某些类来覆盖材料设计。

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

它们是下拉列表中的按钮，所以$ mdThemeProvider应该可以改变它们，如果你想这样做的话。

只需将 md-primary ， md-accent 或 md-warn 添加到其中一个素材元素（md-button）在你的情况下）： md-button，md-checkbox，md-progress-circular，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

编辑：md-menu的工作片段

＆＃13;

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

＆＃13;

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

＆＃13;

第二次编辑：

OP实际上是在讨论md-select中的标签。

只能通过css操作来改变。

现在看起来似乎是改变

的明显选择

md-input-container label {
   some color    
}

然而，角度材料实际上将第一个md-select-value作为它的标签

<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-select，

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

这不会更改下划线或覆盖md-primary或其他样式，只会更改零操作的占位符。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使AngularJS材料下降更明显？

1 个答案: