Angularjs md-button words capitalishize

このようにいくつかのmd-buttonを作ったのですが、残念ながら、複数の単語がある場合、タグ内の2番目の単語は大文字になりません。Angularjs md-button words capitalishize

<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> は、私はアイコンのみを使用することをフォント恐ろしいと呼ばれるライブラリで、以下、この画像のようなものです。どのようにこの問題を解決するためにどのようなアイデアを事前に感謝します。

EDITED &はを解決しよう：md-buttonためtext-transform: capitalize !important;を行うと、実際には動作しません。編集するタグにクラスを追加し、text-transform: capitalize;をCSSファイルのクラスに追加する必要があります。次のように

出典

2016-07-07 Shurui Liu

残念ながら、あなたは、これを達成するための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>

私はそれが役に立てば幸い！

出典

2016-07-08 03:35:33 developer033

「厳密に使う」とすると、私の角膜のアプリがウェブページに表示されないのですが、なぜか分かりません。それ以外はすべてうまくいきます。ありがとう！ –

** "use strict"; ** "strict mode"でJavaScriptコードを実行する必要があることを定義します。あなたはここでそれを確認することができます：http://www.w3schools.com/js/js_strict.asp、つまり、それはちょうどよい練習です。 – developer033

"厳格な使用"私のWebページが消える（全体の空白ページを与える）if私はすべてのコードを "厳密"ではないものにしました。私はそれが高品質のコードを書くのに役立つツールだと思います。 –

Angularjs md-button words capitalishize

答えて

関連する問題