угловой материал отсутствует css классы

Я только начинаю с углового материала. Я загрузил и указал все файлы в качестве инструкции по использованию на here. А затем скопировал весь html-код от here, чтобы опробовать кнопки. Я получил большую часть работы, включая анимацию кликов, но у нее нет темы, такой как 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

Глядя на источник со страницы демок, похоже, что он получает мкр-первичный из docs.css. Я не знаю, где это будет, но я надеюсь, что это указывает на правильное направление. – dkiefer

Вы должны скачать темы здесь https://github.com/angular/bower-material/tree/master/themes, а затем ссылаться на них. Однако он все еще не работает. – Rastio

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» в мою декларацию приложения. –

Для 0.8.3 см. Документацию Theming.

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

Вы можете назвать свою собственную 'тему' из одного из следующих определенных в теме документ Google:

красный
розовый
фиолетовый
глубоко фиолетовый
индиго
синяя
светло-голубой
циан
бирюзовые
зеленый
светло-зеленый
известь
желтый
янтарного
оранжевого
темно-оранжевый цвет
коричневый
серый
сине-серый

Каждая тема имеет 4 намерения:

первичной
акцент
предупреждают
фон

выбрать тему, вы должны объявить его в ваших JS:

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

источник

2015-04-08 17:51:14 trudesign

угловой материал отсутствует css классы

ответ

Смежные вопросы