我是新手,让我知道如何隐藏菜单图标,它会自动添加而不会被提示,我只想在小屏幕上显示.对不起英语不好.

谢谢.

<header class="mdl-layout__header">
    <div class="mdl-layout__header-row">

        <!-- Navigation -->
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link is-active" href="/">link</a>
            <a class="mdl-navigation__link is-active" href="/">link</a>
        </nav>
    </div>
</header>
<div class="mdl-layout__drawer">
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link is-active" href="/">link</a>
        <a class="mdl-navigation__link is-active" href="/">link</a>
    </nav>
</div>

<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
</button>

根据http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/,只要我componentHandler.upgradeDom()在动态加载html后调用它就应该工作.为了确保我正在调用upgradeDom,我添加了按钮以查看是否添加了涟漪效果.按钮已更新,但汉堡包图标未显示.

如果我内联html汉堡包图标出现.

我正在学习Angular2但是我对使用Angular2和MDL有疑问.为什么MDL导航栏不能与Angular2一起使用？当我使用带有标题和抽屉的导航栏时,抽屉不工作,所以我无法点击它,我看不到抽屉的图标.还有另一个问题:文本字段也无法正常工作.我想使用mdl-textfield - expandable(搜索)但是当我点击这个搜索字段时它没有扩展.但是,没有Angular2它工作正常.

UPDATE

这是我的app.html文件

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">Title</span>
            <div class="mdl-layout-spacer"></div>



            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
                </div>
            </div>


        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row">
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a> …

奇怪的虫子.....

• 我有一个竞争条件,我的angularJS指令用于header并在 material-design-lite初始化布局后drawer进行编译.

• 只有当我关闭我的wifi并离线工作时才会发生这种情况.不需要远程资源,但谷歌标签管理器和Facebook连接插件在网络选项卡中失败.

问题:

1. 我可以延迟MDL的自动初始化(我看到onload页面发生了什么？
2. 我可以手动重新初始化mdl-layout,以便它可以重新构建抽屉按钮等吗？
3. 有没有人知道为什么离线会导致任何渲染/ javascript问题？

我已经尝试window.componentHandler.upgradeAllRegistered()但不会重新初始化布局

我是Material Design Lite的新手.我想使用自定义配色方案,特别是原色和强调色.

我见过他们的主题构建工具,但它只提供了一些颜色.

我怎样才能做到这一点？如何在我的网站中使用自定义(主要和重点)颜色(未包含在其主题构建工具中),使用Material Design Lite？

我正在使用纯MDL和Angular2进行项目,但我遇到了textfields和ngModel的问题.

当角度组件为模型中使用的对象设置一些值时,MDL组件不会正确运行脏和有效性检查,我认为这是因为它不需要触发所需的事件.

这是输入代码:

<div class="mdl-textfield mdl-js-textfield">
    <input type="text" required class="mdl-textfield__input" id="field-sample" name="field-sample" [(ngModel)]="obj.name"></input>
    <label class="mdl-textfield__label" for="field-sample">Placeholder label</label>
</div>

这是创建组件后的结果:

请注意,输入有一个值(由角度组件提供),但占位符标签仍然在输入上,输入为红色,表示这是无效的.

经过一些研究,我开发了一个指令解决方案:

import {AfterViewChecked, AfterViewInit, Directive, ElementRef} from '@angular/core';
declare var componentHandler: any;

/**
 * Created to make MDL field validation and dirt check compatible with angular
 * Used in <input> and <textarea> tags
 */
@Directive({
    selector: '[mdl-textfield]'
})
export class MDLTextFieldDirective implements AfterViewChecked, AfterViewInit {

    constructor(private element: ElementRef) {
    }

    ngAfterViewInit() {
        componentHandler.upgradeAllRegistered();
    }

    ngAfterViewChecked() {
        let mdlField = this.element.nativeElement.MaterialTextfield; …

我需要通过 JS 禁用 Material Design Lite 文本字段。我了解我需要将元素升级为 MDL 检测更改。

我期望这样做：

$element.attr('disabled', 'disabled');
componentHandler.upgradeElement($element);

但这似乎不起作用。我以这个工作解决方案结束：

$element.attr('disabled', 'disabled');

let inputWrap = $element.parent();

inputWrap.attr('data-upgraded', '');
inputWrap.attr('class', inputWrap.attr('class').replace(/is-upgraded/g, ''));
inputWrap.attr('class', inputWrap.attr('class').replace(/is-focused/g, ''));

componentHandler.upgradeElement(inputWrap[0]);

它确实达到了目的，但我无法摆脱我手动完成功能的感觉upgradeElement。

有没有一种方法可以用不太激烈的方法来实现这一目标？任何帮助将非常感激。

我尝试设置边距,填充以将后箭头图标移动到标题的左侧但是失败了.我应该如何做到这一点？

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 <header class="mdl-layout__header">
  <div class="mdl-layout__header-row">
      <!--back arrow-->
      <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
       <i class="material-icons">arrow_back</i>
      </button>

     <!--Title-->
     <span class="mdl-layout-title">Settings</span>
  </div>

 <!-- Tabs -->
 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
  <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a>
  <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a>
</div>

我在抽屉里有一组链接。就像这里的导航示例：

http://www.getmdl.io/components/index.html#layout-section/layout

唯一的区别是我的链接不会导致页面刷新（这是使用主干构建的单页面应用程序）。单击链接后如何关闭抽屉？

我想在Angular 2中使用Material Design Lite快餐栏.

我试图在我的模板中抓住Element,如下所示:

我的模板

 <test>
     <div id="child1"> child1 <div id="child2">
      <div id="child2"> child2 <div id="child2">
       <div id="toast_error"> Error message </div>
      </div>
     </div>
    </div>
</test>

在我的组件文件中

constructor(private el:ElementRef){}

ngOnInit(){
        this.show_error("something");
    }
show_error(err){
        var snackbarContainer = this.el.nativeElement.querySelector("#toast_error")
        var data = {
            message: 'Button color changed.',
            timeout: 2000,
            actionText: 'Undo'
        };

        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }

我收到了以下错误消息.如何获取带有id的元素toast_error

EXCEPTION: TypeError: Cannot read property 'MaterialSnackbar' of null in [null]

PS:我已经检查this.el.nativeElement确实给了我正确的参考

编辑

根据答案和评论,我现在可以通过使用相同的代码来获取元素ngAfterViewInit.但是,我无法让小吃店工作.以下是更新的代码.

在我的组件文件中

   constructor(private el:ElementRef){}


    ngAfterViewInit(){
            var snackbarContainer = …