Angularjs md-button 单词大写

Question

我在下面用这种方法做了一些md-buttons，但不幸的是，如果有一个以上的单词，标签中的第二个单词就不大写了。

<md-button ui-sref="DMmain">
    <i class="fa fa-cog fa-2x"></i>
    <h3>Device Management</h3>
</md-button>
<md-button ui-sref="ARmain">
    <i class="fa fa-lock fa-2x"></i>
    <h3>Access Rules</h3>
</md-button>
<md-button ui-sref="UMmain">
    <i class="fa fa-user fa-2x"></i>
    <h3>User Management</h3>
</md-button>
<md-button>
    <i class="fa fa-file-text fa-2x"></i>
    <h3>Account Profile</h3>
</md-button>

效果如下图，

<i class> 是一个名为 Font Awesome 的库，我只将其用于图标。提前感谢您提供解决此问题的任何想法。

已编辑并已解决：为 md-button 做 text-transform: capitalize !important; 并没有真正起作用。您必须将 class 添加到您要编辑的标签上，并将 text-transform: capitalize; 添加到 css 文件中的 class。

Answer 1

不幸的是，您必须覆盖 CSS 才能实现此目的，如下所示：

(function() {
  "use strict";
  angular.module('app', ['ngAnimate', 'ngMaterial', 'ngAria'])
    .controller('mainCtrl', function($scope) {

    });
})();

.capitalize-button {
  text-transform: capitalize;
}

/* 
OR just override the .md-button class in your css.

.md-button {
  text-transform: capitalize !important;
} 
*/

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
  </head>

  <body ng-controller="mainCtrl">
    <md-button ui-sref="DMmain">
      <i class="fa fa-cog fa-2x"></i>
      <h3 class="capitalize-button">device management</h3>
    </md-button>

    <md-button ui-sref="ARmain">
      <i class="fa fa-lock fa-2x"></i>
      <h3 class="capitalize-button">access rules</h3>
    </md-button>

    <md-button ui-sref="UMmain">
      <i class="fa fa-user fa-2x"></i>
      <h3 class="capitalize-button">user management</h3>
    </md-button>

    <md-button>
      <i class="fa fa-file-text fa-2x"></i>
      <h3 class="capitalize-button">account profile</h3>
    </md-button>
  </body>
</html>

Angularjs md-button 单词大写

Angularjs md-button words capitalize

angularjs

angular-material