斜角材料缺少CSS類

我剛剛開始使用角材料。我已經下載並引用了所有文件，作爲here上的使用說明。然後複製here中的所有html代碼以嘗試按鈕。我大部分工作包括點擊動畫，但它沒有任何主題，如md-primary。這就是我得到的。斜角材料缺少CSS類

enter image description here

我已引用angular-material.css，但在那裏我找不到md-primary或任何CSS類。我錯過了什麼參考或如何創建角材料的CSS類？這是它在演示頁面上的外觀。

enter image description here

我的代碼示例。

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

來源

2014-10-30 lawphotog

望着從演示頁面的源代碼，它看起來像它被MD-主要來自docs.css。我不知道那裏的位置，但我希望這一點能讓你朝正確的方向發展。 – dkiefer 2014-10-30 12:47:34

你必須從這裏下載主題https://github.com/angular/bower-material/tree/master/themes然後參考它們。但是，它仍然無法正常工作。 – Rastio 2014-10-31 17:50:37

UPDATE：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>

來源

2014-10-31 17:52:18 Rastio

我有類似的問題，但事實證明，我只是想在我的應用程序聲明中注入'ngMAterial'。 – 2014-12-24 01:55:39

對於0.8.3，請參閱Theming文檔。

https://material.angularjs.org/#/Theming/01_introduction

您可以命名自己的 '主題' 出一個的按照谷歌的主題文檔定義：

紅色
粉色
紫色
深紫色
indigo
藍色
淡藍色
青色
水鴨
綠色
淺綠色
石灰
黃色
琥珀
橙色
深橙色
棕色
灰色
藍灰色

每個主題有4個意圖：

初級
口音
警告
背景

要選擇你有一個主題，聲明它在你的JS：

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

來源

2015-04-08 17:51:14 trudesign

斜角材料缺少CSS類

回答

相關問題