<pre><code class="lang-html"><html lang = en>
<head>
<link rel = stylesheet
href = https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js></script>
<link rel = stylesheet href = https://fonts.googleapis.com/icon?family=Material+Icons>
<style>
.buttondemo section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemo md-content {
margin-right: 7px;
}
.buttondemo section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
.buttondemo .label {
position: absolute;
bottom: 5px;
left: 7px;
font-size: 14px;
opacity: 0.54;
}
</style>
<script language = javascript>
angular
.module('firstApplication', ['ngMaterial'])
.controller('buttonController', buttonController);
function buttonController ($scope) {
$scope.title1 = 'Button';
$scope.title4 = 'Warn';
$scope.isDisabled = true;
$scope.googleUrl = 'http://google.com';
}
</script>
</head>
<body ng-app = firstApplication>
<div class = buttondemo ng-controller = buttonController>
<md-content>
<section layout = row layout-sm = column layout-align = center center
layout-wrap>
<md-button>{{title1}}</md-button>
<md-button md-no-ink class = md-primary>Primary (md-no-ink)</md-button>
<md-button ng-disabled = true class = md-primary>Disabled</md-button>
<md-button class = md-warn>{{title4}}</md-button>
<div class = label>Flat Buttons</div>
</section>
<section layout = row layout-sm = column layout-align = center center
layout-wrap>
<md-button class = md-raised>Button</md-button>
<md-button class = md-raised md-primary>Primary</md-button>
<md-button ng-disabled = true class = md-raised md-primary>
Disabled</md-button>
<md-button class = md-raised md-warn>Warn</md-button>
<div class = label>Raised Buttons</div>
</section>
<section layout = row layout-sm = column layout-align = center center
layout-wrap>
<md-button class = md-fab aria-label = add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-fab md-primary aria-label = add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-fab ng-disabled = true aria-label = add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-fab md-primary md-hue-2 aria-label = add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-fab md-mini aria-label = add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-fab md-mini md-primary aria-label = add>
<md-icon class = material-icons style = color: greenyellow;>
add</md-icon>
</md-button>
<div class = label>FAB Buttons</div>
</section>
<section layout = row layout-sm = column layout-align = center center
layout-wrap>
<md-button ng-href = {{googleUrl}} target = _blank>
Default Link</md-button>
<md-button class = md-primary ng-href = {{googleUrl}}
target = _blank>Primary Link</md-button>
<md-button>Default Button</md-button>
<div class = label>Link vs. Button</div>
</section>
<section layout = row layout-sm = column layout-align = center center
layout-wrap>
<md-button class = md-primary md-hue-1>Primary Hue 1</md-button>
<md-button class = md-warn md-raised md-hue-2>Warn Hue 2</md-button>
<md-button class = md-accent>Accent</md-button>
<md-button class = md-accent md-raised md-hue-1>Accent Hue 1</md-button>
<div class = label>Themed Buttons</div>
</section>
<section layout = row layout-sm = column layout-align = center center
layout-wrap>
<md-button class = md-icon-button md-primary aria-label = Add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-icon-button md-accent aria-label = Add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button class = md-icon-button aria-label = Add>
<md-icon class = material-icons>add</md-icon>
</md-button>
<md-button href = http://google.com
title = Open Google.com in new window
target = _blank
ng-disabled = true
class = md-icon-button launch >
<md-icon class = material-icons>add</md-icon>
</md-button>
<div class = label>Icon Buttons</div>
</section>
</md-content>
</div>
</body>
</html>
</code></pre>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
