你能帮我么
我会把它做点我做了什么
> http://www.getmdl.io/started/index.html#tab1，解释了设计的集成
> http://www.getmdl.io/components/index.html#textfields-section，这是带有浮动标签的文本字段的示例
现在我有Plunkr，我集成，但没有工作
你能请看看
正如你可以看到在index.html我有css和js文件包含在http://www.getmdl.io/started/index.html#tab1建议
<！ - GetMDL scripts - >
< link rel =“stylesheet”href =“https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css”>
< script src =“https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js”>< / script>
< link rel =“stylesheet”href =“https://fonts.googleapis.com/icon?family=Material Icons”>
<！ - GetMDL scripts - >
在app.component.ts文件中：
import {Component,ViewEncapsulation} from 'angular2/core';
@Component({
selector: 'my-app',template: `<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>`,encapsulation:ViewEncapsulation.None,})
工作方式像一个魅力，包装这一个完整的解决方案，这对我很好(用beta6测试)。没有太多的样板代码。我唯一没有工作的是真正动态添加元素通过* ngFor取决于组件变量。请参阅模板中的动态元素。也许你们中的一个人知道如何解决这个问题。
看到一个工作的plunkr(预览必须至少1024px宽看到头)
安装MDL
npm i material-design-lite --save
在您的index.html中引用它
<script src="/node_modules/material-design-lite/material.min.js"></script> <!-- from http://www.getmdl.io/customize/index.html --> <link rel="stylesheet" href="/css/customized-material.min.css">
创建MaterialDesignLiteUpgradeElement.ts
import {Directive,AfterViewInit} from 'angular2/core';
declare var componentHandler: any;
@Directive({
selector: '[mdl]'
})
export class MDL implements AfterViewInit {
ngAfterViewInit() {
componentHandler.upgradeAllRegistered();
}
}
然后在你的组件导入和注册它
import { Component } from '@angular/core';
import { MDL } from '../../../directives/MaterialDesignLiteUpgradeElement';
@Component ({
selector: 'my-component',directives: [ MDL ],templateUrl: 'app/components/Header/Header.html'
})
export class Header {
public dynamicArray:number[] = [];
add() {
this.dynamicArray.push(Math.round(Math.random() * 10));
}
}
并在您的模板中添加mdl到根组件
<header mdl class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Home</span>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
(click)="add()">
<i class="material-icons">add</i>
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">Static entry</li>
<!-- semi dynamic,kNown when view is created -->
<li class="mdl-menu__item" *ngFor="#nr of [1,2,3]">Semi Dynamic entry {{nr}}</li>
<!-- dynamic,depends on service manipulated array -->
<li class="mdl-menu__item" *ngFor="#nr of dynamicArray">Dynamic entry {{nr}}</li>
</ul>
</div>
</header>