angular material missing css classes

Question

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 here to 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.

enter image description here

I have referenced angular-material.css but i can't find md-primary or 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.

enter image description here

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>

Looking at the source from the demos page, it looks like it gets md-primary from docs.css. I don't know where that would be located, but I hope that points you in the right direction. — dkiefer
– dkiefer, Commented Oct 30, 2014 at 12:47
You have to download themes from here github.com/angular/bower-material/tree/master/themes and then reference them. However, it's still not working. — Rastio
– Rastio, Commented Oct 31, 2014 at 17:50

Rastio · Accepted Answer · 2014-10-31 19:01:38Z

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-material and all is good. You still have to reference theme 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>

I was having a similar problem, but it turned out that I was just missing to inject 'ngMAterial' in my application declaration.

Community · Accepted Answer · 2015-07-17 07:21:49Z

3

For 0.8.3, see the Theming documentation.

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:

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:

primary
accent
warn
background

To Choose a theme you have to declare it in your JS:

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

edited Jul 17, 2015 at 7:21

CommunityBot

11 silver badge

answered Apr 8, 2015 at 17:51

trudesign

1172 silver badges16 bronze badges

Collectives™ on Stack Overflow

angular material missing css classes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related