md-toolbar不使用角度材质

时间:2016-12-01 09:11:52

标签: javascript angularjs angular-material

我使用角度素材v1.1.0并尝试创建一个简单的工具栏。我从角度材质演示中获取了代码,但正在渲染工具栏,而不是获取单个元素。不确定我错过了什么。



var app = angular.module('app', ['ngMaterial', 'ngRoute']);

    <html ng-app="app">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>My App</title>

    	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    	<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
      </head>

      <body>
        <md-content>
        	<md-toolbar>
        		<div class="md-toolbar-tools">
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">menu</md-icon>
        			</md-button>
        			<h2>
        				<span>My App</span>
        			</h2>
        			<span flex></span>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">whatshot</md-icon>
        			</md-button>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">share</md-icon>
        			</md-button>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">file_download</md-icon>
        			</md-button>
        			<md-button class="md-icon-button" aria-label="menu">
        				<md-icon md-font-set="material-icons">thumb_up</md-icon>
        			</md-button>
        		</div>
        	</md-toolbar>
        </md-content>
      </body>
    </html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您在加载角度素材css时忘记添加rel="stylesheet"。在这里工作笔:

http://codepen.io/anon/pen/jVYEdM