角材料缺少 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26653052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular material missing css classes
提问by lawphotog
I am just getting started with angular material. I have downloaded and referenced all the files as the usage instruction on here. And then copied all html code from hereto try out the buttons. I got most of it working including click animations but it doesn't have any theme such as md-primary. This is what i got.
我刚刚开始使用角材料。我已经下载并引用了所有文件作为此处的使用说明。然后从这里复制所有 html 代码来试用按钮。我得到了大部分工作，包括点击动画，但它没有任何主题，例如md-primary. 这就是我得到的。
I have referenced angular-material.cssbut i can't find md-primaryor any css classes in there. What am I missing to reference or how to create those css classes for angular material? This is how it looks like on the demo page.
我已经引用了，angular-material.css但md-primary在那里找不到任何 css 类。我缺少什么参考或如何为角材料创建这些 css 类？这是演示页面上的样子。
My code sample.
我的代码示例。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="../bower_components/angular-material/angular-material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<md-content>
<section layout="vertical" layout-sm="horizontal" layout-align="center center">
<md-button>Button</md-button>
<md-button noink class="md-primary">Primary (noink)</md-button>
<md-button disabled class="md-primary">Disabled</md-button>
<md-button class="md-warn">Warn</md-button>
<div class="label">flat</div>
</section>
<section layout="vertical" layout-sm="horizontal" layout-align="center center">
<md-button class="md-raised">Button</md-button>
<md-button class="md-raised md-primary">Primary</md-button>
<md-button disabled class="md-raised md-primary">Disabled</md-button>
<md-button class="md-raised md-warn">Warn</md-button>
<div class="label">raised</div>
</section>
<section layout="vertical" layout-sm="horizontal" layout-align="center center">
<md-button class="md-fab" aria-label="Time">
<md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
<md-button class="md-fab" aria-label="New document">
<md-icon icon="/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
<md-button class="md-fab" disabled arial-label="Comment">
<md-icon icon="/img/icons/ic_comment_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
<md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
<div class="label">FAB</div>
</section>
<section layout="vertical" layout-sm="horizontal" layout-align="center center">
<md-button class>Reset</md-button>
<md-button class>RSVP</md-button>
<div class="label">Button Group</div>
</section>
<section layout="vertical" layout-sm="horizontal" layout-align="center center">
<md-button class="md-primary" md-theme="green">Button</md-button>
<md-button class="md-primary md-raised" md-theme="indigo">Button</md-button>
<md-button class="md-primary md-raised" md-theme="orange">Button</md-button>
<md-button class="md-primary" md-theme="cyan">Button</md-button>
<div class="label">Themed</div>
</section>
</md-content>
</div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/hammerjs/hammer.js"></script>
<script src="../bower_components/angular-material/angular-material.js"></script>
<script>
// Include app dependency on ngMaterial
angular.module('YourApp', ['ngMaterial'])
.controller("YourController", YourController);
function YourController() {
}
</script>
采纳答案by Rastio
UPDATE: Aaand it works! They have just released v.0.5.0 which now includes theming. Demo web site runs off master, that's why it worked before.
Just run bower install angular-materialand all is good. You still have to reference theme css.
更新：Aaand它有效！他们刚刚发布了 v.0.5.0，现在包括主题。演示网站跑掉了主人，这就是它以前工作的原因。就跑bower install angular-material，一切都很好。您仍然必须引用主题 css。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-aria.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- default themes and core styles -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
<!-- extra, overriding theme files -->
<link rel="stylesheet" href="bower_components/angular-material/themes/indigo-theme.css">
<link rel="stylesheet" href="bower_components/angular-material/themes/green-theme.css">
<!-- Your custom JavaScript code -->
<script>
angular.module('myApp', [ 'ngMaterial' ]);
</script>
</head>
<body>
<div ng-app="myApp" layout="vertical">
<!-- The md-toolbar and all of its children will use the indigo theme -->
<md-toolbar md-theme="indigo">
I'm indigo
</md-toolbar>
<!-- The md-content and all of its children will use the green theme -->
<md-content md-theme="green">
and I'm green
</md-content>
<!-- The button uses default-theme, since no md-theme is found -->
<md-button>Hello</md-button>
<md-progress-linear md-theme="green" mode="indeterminate" ng-value="30"></md-progress-linear>
</div>
</body>
</html>
回答by trudesign
For 0.8.3, see the Theming documentation.
对于 0.8.3，请参阅主题文档。
https://material.angularjs.org/#/Theming/01_introduction
https://material.angularjs.org/#/Theming/01_introduction
You can name your own 'theme' out of one of the following defined in Google's theme doc:
您可以从 Google 的主题文档中定义的以下其中一项中命名您自己的“主题”：
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
- 红色的
- 粉色的
- 紫色的
- 深紫色
- 靛青
- 蓝色
- 浅蓝
- 青色
- 青色
- 绿色
- 浅绿色
- 酸橙
- 黄色
- 琥珀色
- 橘子
- 深橙色
- 棕色的
- 灰色的
- 蓝灰色
Each theme has 4 intentions:
每个主题有4个意图：
- primary
- accent
- warn
- background
- 基本的
- 口音
- 警告
- 背景
To Choose a theme you have to declare it in your JS:
要选择一个主题，您必须在 JS 中声明它：
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
