我正在使用 AngularJS 和 Material Design,而困扰我的一件事是我无法准确复制谷歌官方网站上用于按钮标签的样式。 材料设计按钮演示
当我使用这样的按钮时:
<md-button class="md-raised md-primary">Start</md-button>
<md-button class="md-raised md-primary"><label>Start</label></md-button>
我得到这样的东西:
我期待有这样的东西:
这有点像我根据他们网站上提供的源代码编写的代码
<md-button class="md-raised md-primary">Primary</md-button>
我尝试使用<b></b>
标签而不是标签,但结果相似,有些字母不太合适......我是否缺少一些东西来解决这个字体问题?
编辑:我的代码之一的示例。
(function() {
angular
.module("demoApp", [
"ngMaterial",
"app.config",
"app.controller"
]);
})();
.md-button {
min-width: 10em;
}
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" href="../bootstrap/bootstrap.css">
<link rel="stylesheet" href="../material/angular-material.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body ng-app="demoApp">
<div layout="column" style="padding-bottom: 20px;">
<md-toolbar layout="row">
<h1 class="Title">Ten plus ten is {{10+10}}!</h1>
</md-toolbar>
</div>
<div layout="row">
<div>
</div>
<div layout="column">
<div layout="row">
<div flex="25" flex-sm="0" flex-md="0"></div>
<div flex class="md-whiteframe-z1" layout="column" style="margin-bottom: 15px;">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<span class="md-flex">Parameters</span>
</div>
</md-toolbar>
<md-content class="md-padding">
<p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
</p>
<p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
</p>
<div>
<div layout="column" ng-controller="ParametersController as params">
<md-content class="md-padding">
<div layout layout-sm="column">
<md-input-container flex>
<label>Parameter 1</label>
<input ng-model="params.param1" placeholder="placehold text">
</md-input-container>
<md-input-container flex>
<label>Parameter 2</label>
<input ng-model="params.param2" placeholder="placehold text">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex>
<label>Parameter 3</label>
<input ng-model="params.param3" placeholder="placehold text">
</md-input-container>
<md-input-container flex>
<label>Parameter 4</label>
<input ng-model="params.param4" placeholder="placehold text">
</md-input-container>
</div>
</md-content>
</div>
<div layout="row" layout-align="end center">
<div></div>
<md-button class="md-raised md-primary" ng-click="sendParameters()">Primary</md-button>
</div>
</div>
</md-content>
</div>
<div flex="25" flex-sm="0" flex-md="0"></div>
</div>
<div layout="row">
<div flex="25" flex-sm="0" flex-md="0"></div>
<div flex class="md-whiteframe-z1" layout="column" style="margin-bottom: 15px;">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<span class="md-flex">Algorithm</span>
</div>
</md-toolbar>
<md-content class="md-padding">
<p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
</p>
<p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
</p>
</md-content>
</div>
<div flex="25" flex-sm="0" flex-md="0"></div>
</div>
<div layout="row">
<div flex="25" flex-sm="0" flex-md="0"></div>
<div flex class="md-whiteframe-z1" layout="column" style="margin-bottom: 15px;">
<md-toolbar class="md-accent">
<div class="md-toolbar-tools">
<span class="md-flex">Video</span>
</div>
</md-toolbar>
<md-content class="md-padding">
<p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
</p>
<p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
</p>
</md-content>
</div>
<div flex="25" flex-sm="0" flex-md="0"></div>
</div>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="app.contoller.js"></script>
</body>
</html>