Angularjs md-button words capitalize

我在下面以这种方式制作了一些md按钮，但不幸的是，如果有多个单词，标记中的第二个单词不会大写。Angularjs md-button words capitalize

<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 &解决：做text-transform: capitalize !important;为md-button并未真正发挥作用。您必须将课程放到您想要编辑的标签上，并将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

“使用严格”会使我的Angular应用程序不显示在网页上，我不知道为什么......除此之外，一切工作正常。谢谢！ –

**“use strict”; **定义JavaScript代码应该在“严格模式”下执行。你可以在这里查看：http://www.w3schools.com/js/js_strict.asp，换句话说，这只是一个很好的做法。 – developer033

“严格使用”会使我的网页消失（给出一个完整的空白页面）if我提出的任何代码都不是“严格”的。我想这是一个帮助我们编写高质量代码的工具。 –

Angularjs md-button words capitalize

回答

相关问题