Winkel-material, fehlende css-Klassen

Ich bin gerade erst angefangen mit kantigem material. Ich habe heruntergeladen und referenziert alle Dateien, die als die Nutzung Anweisung auf hier. Und dann kopiert den gesamten html code aus hier zum ausprobieren der Tasten. Ich habe die meisten davon arbeiten mit klicken Sie auf Animationen, aber es muss nicht jedes Thema wie md-primary. Dies ist, was ich habe.

Habe ich verwiesen angular-material.css aber ich kann nicht finden md-primary oder alle css-Klassen. Was bin ich zu Referenz-oder, wie man erstellen Sie die css-Klassen für Winkel-material? So sieht es aus wie auf der demo-Seite.

Winkel-material, fehlende css-Klassen

Mein code-Beispiel.

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

Blick auf die Quelle, aus der demos-Seite, wie es aussieht, bekommt es md-primär docs.css. Ich weiß nicht, wo das liegen würde, aber ich hoffe, dass die Punkte, die Sie in die richtige Richtung.
Sie haben zu download themes von hier aus github.com/angular/bower-material/tree/master/themes und dann referenzieren. Allerdings funktioniert es immer noch nicht.

InformationsquelleAutor lawphotog | 2014-10-30

UPDATE: Aaand it works! Sie haben soeben die v. 0.5.0 nun auch themes. Demo Website läuft-master, das ist, warum es vorher funktioniert.
Führen Sie einfach bower install angular-material und alles ist gut. Haben Sie immer noch Referenz Thema 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>

Ich hatte ein ähnliches problem, aber es stellte sich heraus, dass ich fehlte, war eben zu injizieren 'ngMAterial' in meiner Anwendung Erklärung.

InformationsquelleAutor Rastio

3

Für 0.8.3 finden Sie in der Theme-Dokumentation.

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

Können Sie den Namen Ihres eigenen "Thema" aus einem der folgenden Definition in Google ist das Thema doc:
- rot
- rosa
- lila
- deep-Purple-lila
- indigo
- blau
- Licht-blau
- cyan
- teal
- grün
- Licht-grün
- Kalk
- gelb
- amber
- orange
- tief-orange
- Braun
- Grau
- blau-Grau
Jedes Thema hat 4 Absichten:
- primäre
- Akzent
- warnen
- hintergrund
Wählen Sie ein Thema, das Sie haben zu erklären, es in Ihrem JS:
```
 angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
   $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
 });
```
InformationsquelleAutor trudesign

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.