角度2与材料设计 - 响应行为不起作用？

Question

我在Angular2中使用Angular Material。该代码包含md-card,md-content,md-input-container和其他一些Material Design指令。

在开始页面（app.component）我使用了带有3个选项卡的md-tab-group。在其中一个窗体正在加载...它按预期工作。我的问题是如何使窗体宽度大约在33％左右，并保持移动设备的响应行为。

我用DIV和其他CSS定义做了很少的CSS解决方法，并且能够将宽度更改为33％并居中，但我放松了页面的响应行为，因此我的CSS定义都没有帮助iPhone 6的肖像，表格太小..占其包装的33％的100％）

我不想添加媒体查询，因为我想使用内置的Material Design响应功能。

login.component：

<md-card> 
    <form #form="ngForm" method="POST"> 
     <div> 
      <md-input-container> 
       <md-placeholder> 
        <md-icon mdPrefix>mail</md-icon> Email 
       </md-placeholder> 
       <br> 
       <input mdInput name="email" [(ngModel)]="email" #inputMail required> 
       <md-error>Email is required</md-error> 
      </md-input-container> 
     </div> 
     <div> 
      <md-input-container> 
       <md-placeholder> 
        <md-icon mdPrefix>lock_outline</md-icon> password 
       </md-placeholder> 
       <br> 
       <input mdInput type="password" name="password" [(ngModel)]="xxx" #inputPass required=""> 
       <md-error>Password is required</md-error> 
      </md-input-container> 
     </div> 
     <br> 
     <div class="button-row"> 
      <button type="submit" class="submit" md-button (click)="loginCheck(inputMail.value, inputPass.value)">Sign in</button> 
     </div> 
    </form> 
</md-card> 

app.component：

<md-tab-group flex> 
    <md-tab label="Login"> 
     <div id="page-padding"> 
      <router-outlet></router-outlet> //loading login form 
     </div> 
    </md-tab> 
    <md-tab label="Sign Up"> 
     <br><br> 
     <div id="page-padding"> 
      <router-outlet name="content"></router-outlet> 
     </div> 
    </md-tab> 
    <md-tab label="How To"> 
     <router-outlet name="howto"></router-outlet> 
    </md-tab> 
</md-tab-group> 

<div layout-align="center center"> 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
    </div> 
</div> 

任何想法如何解决这个问题吗？我应该安装（使用npm）和/或导入任何进一步的软件包以进行响应行为？

Answer 1

Im相当肯定，如果你使用Flex的角度布局

https://github.com/angular/flex-layout

它会自动处理媒体查询减免等问题作出响应，你可以解决你的问题。它的工作原理以及与角料一起

Answer 2

只需通过NPM安装@angular/flex-layout：

npm install --save @angular/flex-layout@latest 

然后导入模块在app.module.ts：

import {FlexLayoutModule} from '@angular/material'; 
// ... 
@NgModule([ 
    imports: [ 
     FlexLayoutModule, 
     // ... 
    ] 
]) 
export class AppModule {} 

要使用flex，属性fxFlex添加到部分你想要的地方：

<md-tab-group fxFlex> 
<md-tab label="Login"> 
    <div class="page-padding"> 
     <router-outlet></router-outlet> <!--loading login form--> 
    </div> 
</md-tab> 
<md-tab label="Sign Up"> 
    <br><br> 
    <div class="page-padding"> 
     <router-outlet name="content"></router-outlet> 
    </div> 
</md-tab> 
<md-tab label="How To"> 
    <router-outlet name="howto"></router-outlet> 
</md-tab> 

退房的@angular/flex-layout wiki更多的信息，更多的属性和他们做什么。

注：

1. 请使用一个唯一的ID为每个标签的填充或使用class代替。
2. 请不要混合material-design-lite和angularjs-material在一起！
   • 例如，具有fxLayoutAlign和flex与fxFlex替换layout-align。