角度2与材料设计 - 响应行为不起作用?
我在Angular2中使用Angular Material。该代码包含md-card
,md-content
,md-input-container
和其他一些Material Design指令。角度2与材料设计 - 响应行为不起作用?
在开始页面(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)和/或导入任何进一步的软件包以进行响应行为?
Im相当肯定,如果你使用Flex的角度布局
https://github.com/angular/flex-layout
它会自动处理媒体查询减免等问题作出响应,你可以解决你的问题。它的工作原理以及与角料一起
我之前试过,它没有给我预期的结果。并且npm注册表上的可用版本是:2.0.0-beta.8,在那里我不确定它会正常工作。这是我运行npm过时命令时得到的结果: 包当前通缉最新位置 'flex-layout-srcs 2.0.0-beta.8 git git projectName' –
@ k.vincent它仍然可以使用Angular 4版本'2.0.0-beta.8'及以上 - > [更多信息](https://github.com/angular/flex-layout/blob/master/CHANGELOG.md#breaking-changes) – Edric
@Edric:当然,我会再试一次...也许我错过了我的代码 –
只需通过NPM安装@angular/flex-layout
:
npm install --save @angular/[email protected]
然后导入模块在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
在一起!- 例如,具有
fxLayoutAlign
和flex
与fxFlex
替换layout-align
。
- 例如,具有
已经完成所有这些步骤...仍然要弄清楚它究竟应该如何在HTML标记中使用 - 查看 –
@ k.vincent更新了答案展示如何放置标记。 – Edric
包括一个视区元标记,如告诉布劳尔您的网站响应,应该用正确的CSS像素渲染缩放。 –
@RahulSingh:我已经使用它了:'' –