Question

我正在使用Angular2和Angular2。该代码包含font-size: 0，md-card，md-content和其他一些Material设计指令。

在开始页面（app.component）中，我正在使用带有3个标签的md-input-container。在其中一个表单正在加载...它按预期工作。我的问题是如何使表格宽度大约为33％并居中，但保持移动设备的响应行为。

我使用DIV和其他CSS定义做了很少的CSS解决方法，并且能够将宽度更改为33％并将其置于中心位置，但是我放松了页面的响应行为，因此我的CSS定义都没有帮助（通过iPhone 6肖像，形式太小..需要100％的33％的包装）

我不想添加媒体查询，因为我想使用内置材质设计响应功能。

login.component：

md-tab-group

app.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>

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

Answer 1

只需通过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以获取更多信息，更多属性以及他们的工作。

备注：

请为每个标签的填充使用唯一ID，或使用class代替。

请不要将material-design-lite和angularjs-material混合在一起！

例如，将layout-align替换为fxLayoutAlign，将flex替换为fxFlex。

Answer 2

如果您使用Angular Flex Layout

，我非常确定您可以解决问题

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

它会自动处理媒体查询中断和其他响应问题。它与Angular Material

结合使用效果很好

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

2 个答案: