我可以使用open属性或open()方法和flex-layout响应api使我的mat-sidenav响应吗? Like <mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">
Angular2 Material Responsive Sidenav和flex-layout
3
A
回答
5
你可以考虑使用@angular/flex-alyoutObservableMedia观看媒体/断点修改和更新mode
或其他性质相应地取决于活性介质水平。这通过订阅注入的ObservableMedia
服务实例并检查活动媒体级别来完成。然后,您可以通过绑定到您的类属性的一种方式将opened
和mode
properties的<md-sidenav>
绑定到一个方法[]
。如果需要,可以将此逻辑放入服务和/或属性指令中。
使用/更新properties而不是应用CSS更改将确保正确的动画发生。
TS:
import { Component } from '@angular/core';
import { MediaChange, ObservableMedia } from "@angular/flex-layout";
@Component({ ... })
export class AppComponent {
mode: string = 'side';
opened: boolean = true;
constructor(private media: ObservableMedia) {
this.media.subscribe((mediaChange: MediaChange) => {
this.mode = this.getMode(mediaChange);
// this.opened = this.getOpened(mediaChange);
});
}
private getMode(mediaChange: MediaChange): string {
// set mode based on a breakpoint
if (this.media.isActive('gt-sm')) {
return 'side';
} else {
return 'over';
}
}
// open/close as needed
private getOpened(mediaChange: MediaChange): string { }
}
HTML:
<md-sidenav-container class="example-container">
<md-sidenav #sidenav class="example-sidenav" [opened]="opened" [mode]="mode">
Jolly good!
</md-sidenav>
<div class="example-sidenav-content">
<p>Sidenav content</p>
<button type="button" md-button (click)="sidenav.open()">
Open sidenav
</button>
</div>
</md-sidenav-container>
希望帮助!
0
一种方法是使用flex处理css中的响应,方法是根据打开还是关闭,为您的mat-sidenav创建一个类。
<mat-sidenav [ngClass]="sidenav.opened ? 'sideOpened' : 'sideClosed'">
的.css
.sideOpened {
// Handle Responsiveness
}
.sideClosed {
// Handle Responsiveness
}
相关问题
- 1. Angular2 Material md-sidenav-container在ng测试中导致异常
- 2. Angular2 material dialog self close
- 3. 导入flexLayout后Angular2应用程序不工作
- 4. 使用Angular Material 2和SideNav的元素焦点
- 5. 如何在组件内使用Angular 2 Material Sidenav?
- 6. MaterializeCSS的NavBar和SideNav
- 7. Angular2 Material md-button错误
- 8. Angular2 Material SnackBar集成问题
- 9. React.js本地Flexlayout
- 10. Angular2料2 - sidenav独立于内容
- 11. 如何使用FlexLayout,Angular 4,Material Design来增加一个组件的高度
- 12. Flexlayout不支持* ngfor?
- 13. 实现CSS Sidenav和内容
- 14. Angular Material中的一个页面中的两个sidenav
- 15. 如何使用Angular-Material获得完整高度的sidenav
- 16. Angular2中的可重用Sidenav材质设计
- 17. Angular2 material md-input type =“date”not in IE 11
- 18. 加载错误ng2-material-select angular2
- 19. 在Angular2中包含Material Design Lite(MDL)
- 20. Angular2 Material ViewportRuler单元测试错误
- 21. angular2-material 2图标未显示
- 22. 如何在Angular2中集成Material Design Lite
- 23. Materialise Sidenav Icon Issue Issue
- 24. ReactNative:TextInput在FlexLayout中消失
- 25. Sidenav materializecss window dim
- 26. Class'kartik \ sidenav \ SideNav'找不到
- 27. 粘性工具栏素材2和sidenav
- 28. 登录和注销的材料Sidenav
- 29. Angular2 + Material:mat-toolbar在mat-sidenav-container上没有阴影,尽管是mat-elevation-z *
- 30. Md-Sidenav。如何在sidenav打开时将主要内容向右推?
非常感谢!它帮助我:) – kipris