角度材质缺少css类_Css_Angularjs_Material Design

角度材质缺少css类

css angularjs

角度材质缺少css类,css,angularjs,material-design,Css,Angularjs,Material Design,我刚刚开始学习棱角材料。我已下载并引用了所有文件，作为上的使用说明。然后从中复制所有html代码以尝试按钮。我让它的大部分工作，包括点击动画，但它没有任何主题，如mdprimary。这就是我得到的我已经引用了angular material.css，但在那里我找不到md primary或任何css类。我缺少什么参考，或者如何为角度材质创建css类？这是演示页面上的样子我的代码示例 <!DOCTYPE html> <html xmlns="http://www.w3.or

我刚刚开始学习棱角材料。我已下载并引用了所有文件，作为上的使用说明。然后从中复制所有html代码以尝试按钮。我让它的大部分工作，包括点击动画，但它没有任何主题，如

mdprimary

。这就是我得到的

我已经引用了

angular material.css

，但在那里我找不到

md primary

或任何css类。我缺少什么参考，或者如何为角度材质创建css类？这是演示页面上的样子

我的代码示例

<!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>


按钮
初级（noink）
残废
警告
平的
按钮
主要的，重要的
残废
警告
提高
绝妙的
重置
冒险类游戏
按钮组
按钮
按钮
按钮
按钮
主题
//包括应用程序对ngMaterial的依赖性
angular.module（'YourApp'，['ngMaterial']））
.控制人（“你的控制人”，你的控制人）；
函数控制器（）{
}

更新：aa而且它可以工作！他们刚刚发布了v.0.5.0，现在包括主题化。演示网站运行了主，这就是为什么它以前工作。只需运行

bower安装角材料

，一切正常。您仍然必须引用主题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>


角度模块（'myApp'，['ngMaterial']）；
我是靛蓝
我是绿色的
你好

有关0.8.3，请参阅主题文档

您可以根据谷歌主题文档中定义的以下内容之一命名自己的“主题”：

红色的
粉红的
紫色的
深紫色
靛蓝
蓝色的
浅蓝色
青色
水鸭
绿色的
浅绿色
石灰
黄色的
琥珀色
橙色的
深橙色
棕色的
灰色的
蓝灰色

每个主题有4个意图：

初级的
口音
警告
背景

要选择主题，您必须在JS中声明它：

 angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
   $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
 });

从demos页面查看源代码，它看起来像是从docs.css获取md primary。我不知道它会在哪里，但我希望它能为你指明正确的方向。你必须从这里下载主题，然后引用它们。然而，它仍然不起作用。我遇到了类似的问题，但结果证明我只是缺少在我的应用程序声明中注入“ngMAterial”。