标签: angular2-material

我有一个使用的角度2材质的应用程序<md-sidenav-layout>与<md-toolbar>内部.

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    sidenav content
  </md-sidenav>

  <md-toolbar color="primary" class="toolbar">
    toolbar content
  </md-toolbar>
</md-sidenav-layout>

它看起来像这样

我要做的是让工具栏粘在顶部,这样当你向下滚动时它就不会移动.这是为了使其与sidenav及其标题保持一致.但目前它不起作用.

我虽然添加position: fixed; top: 0会做到这一点,但事实并非如此

/* Doesn't work */
.toolbar {
  position: fixed;
  top: 0;
}

从我读出MDN:位置和该SO张贴有关position: fixed,似乎如果父母使用它不会工作transform.而且我很确定md-sidenav-layout侧面切换时转换的用途是什么.我position: fixed; top: 0在一个简单的静态页面上测试了它,它工作正常.

我可以尝试将工具栏从上下文中取出md-sidenav-layout,但它是处理动画和过渡以使工具栏和sidenav在切换sidenav时保持一致的.

我的CSS-fu并不强大.也许我错过了什么.有没有关于如何解决这个问题的任何机构？只要我获得了预期的效果,欢迎任何解决方法.

这是Plunker.

Angular2材质复选框,工具栏,nd按钮组件随css一起显示.但sidenav没有用css显示.上面提供的图片.

使用过的代码

https://www.npmjs.com/package/@angular2-material/sidenav

  <md-sidenav-layout fullscreen>
    <md-sidenav #start (open)="mybutton.focus()">
        Start Sidenav.
        <br>
        <button md-button #mybutton (click)="start.close()">Close</button>
    </md-sidenav>
    <md-sidenav #end align="end">
        End Sidenav.
        <button md-button (click)="end.close()">Close</button>
    </md-sidenav>

    My regular content. This will be moved into the proper DOM at runtime.
</md-sidenav-layout>

    My regular content. This will be moved into the proper DOM at runtime.
</md-sidenav-layout>

组件文件

import { Component } from "@angular/core";
import { MdSidenav } from '@angular2-material/sidenav';
import { MdCheckbox } from '@angular2-material/checkbox';
import { MdButton } from '@angular2-material/button';
import { …

如果我的模板中有 2 个菜单组件，如下所示

<button md-icon-button [md-menu-trigger-for]="menu">
    <md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
  <button md-menu-item>Refresh</button>
  <button md-menu-item>Settings</button>
  <button md-menu-item>Help</button>
  <button md-menu-item disabled>Sign Out</button>
</md-menu>

<button md-icon-button [md-menu-trigger-for]="menu1">
    <md-icon>more_vert</md-icon>
</button>
<md-menu #menu1="mdMenu">
  <button md-menu-item>Refresh</button>
  <button md-menu-item>Settings</button>
  <button md-menu-item>Help</button>
  <button md-menu-item disabled>Sign Out</button>
</md-menu>

如何以编程方式切换第二个菜单组件？通常，如果模板中只有一个菜单组件，我们可以使用 @ViewChild(MdMenuTrigger) 。有没有办法通过在@ViewChild中指定组件名称来找出第n个菜单组件并以编程方式打开菜单？

我正在尝试mat-menu在应用程序的工具栏中为我编写一个测试。当我调用button.click()测试时，Cannot read property 'templateRef' of undefined控制台中出现错误。

在浏览器中可以找到所有作品，我相信这与我运行测试的方式有关吗？

app.component.spec.ts

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

import { AppRoutes } from './app.routes';
import {
  MatToolbarModule,
  MatIconModule,
  MatMenuModule,
  MatButtonModule
} from '@angular/material';

import { HomeComponent } from './home/home.component';
import { UserService } from './user/user.service';

class MockUserService {
  signIn() {}
}

describe('AppComponent', () => {
  let app: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(async(() => { …

我想在大屏幕上打开md-sidenav并在移动设备上关闭它.在我的应用程序中执行此操作的正确方法是什么？

有没有可能在angular2组件内查询媒体？

我有这个从列表动态创建的输入column,现在我需要在某些方法发生时获取所有输入值(想象getAllValues())

      <div *ngFor="let cell of column; let i = index;">
              <!-- Material design input-->
              <md-input type="{{cell.type}}" 
                 value="{{getInputValue(cell)}}" 
                 [placeholder]="cell.label">
              </md-input>
      </div>

获取所有生成输入的值的angular2方法是什么？

这不会像文本框而不是选择那样显示所选值。怎么了？

<md-select #mySelect>
    <md-option value="1">one</md-option>
    <md-option value="2">two</md-option>
</md-select>
{{ mySelect.value }}

我在这里做了一个简单的代码http://embed.plnkr.co/INpybaat2XZqdStsKAdy/.卡片没有在一行中呈现.如何使它在一行中呈现？谢谢.

我正在使用Material 2开发一个Angular 2项目.出于某种原因,图标没有显示,只是图标的"关键"是文本.

app.module:

  ...    
    import {MdButtonModule} from "@angular2-material/button";
    import {MdIconModule, MdIconRegistry} from "@angular2-material/icon";
    ...

    @NgModule({
      declarations: [AppComponent,... CollapseableComponent],
      imports: [... MdButtonModule, MdIconModule, MdInputModule],
      providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
      }, ... MdIconRegistry],
      bootstrap: [AppComponent]
    })
    export class AppModule {

    }

index.html的:

...
    <link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>
  </head>
...

我试过几种方法:

  <button md-fab> <md-icon>add</md-icon></button>
    <button md-fab> <md-icon class="md-elevation-z1">create</md-icon></button>
    <button md-icon-button>add</button>

我想我尝试了大约5个排列,但都有相同的结果.我看到了按钮,但上面有文字.仅仅图标也没有显示在任何这些方法中.