[英]Angular Material: How to set Sidenav/Drawer to be open by default?
I am using the Angular Material Sidenav
component.我正在使用 Angular Material
Sidenav
组件。
When I serve the webpage, the sidebar does not appear (first image).当我提供网页时,侧边栏没有出现(第一张图片)。
However, when I resize the browser for a while, the Sidenav
eventually appears (second image with the hamburger icon), which is the desired state.但是,当我调整浏览器的大小一段时间后,最终会出现
Sidenav
(带有汉堡图标的第二个图像),这是所需的状态。
Why is this?为什么是这样? Is there a way to make it appear by default?
有没有办法让它默认显示?
Per the Angular Material documentation, the MatDrawer
/ MatSidenav
opened state may be controlled using the property opened
as well as the method open()
.根据 Angular Material 文档,
MatDrawer
/ MatSidenav
打开状态可以使用属性opened
以及方法open()
。
MatSidenav extends MatDrawer
MatSidenav 扩展了 MatDrawer
Selector: mat-sidenav
选择器:mat-sidenav
Exported as: matSidenav导出为:matSidenav
Properties
特性
@Input() opened: boolean
- Whether the drawer is opened.@Input() opened: boolean
- 抽屉是否打开。 We overload this because we trigger an event when it starts or end.我们重载它是因为我们在它开始或结束时触发了一个事件。
Methods
方法
open
- Open the drawer.open
- 打开抽屉。
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened="true">
Sidenav content
</mat-sidenav>
<mat-sidenav-content>
<p>The content.</p>
</mat-sidenav-content>
</mat-sidenav-container>
See the officialAngular Material Sidenav Examples .请参阅官方的Angular Material Sidenav 示例。
I noticed this on the default angular material schematic for the sidebar.我在侧边栏的默认角度材料示意图中注意到了这一点。 For some reason the
BreakpointObserver
as async didn't seem to work right away for the nav open button.出于某种原因,作为异步的
BreakpointObserver
似乎无法立即用于导航打开按钮。 I used breakpointObserver.isMatched()
instead of breakpointObserver.observe()
我使用了
breakpointObserver.isMatched()
而不是breakpointObserver.observe()
In component在组件中
get isHandset(): boolean {
return this.breakpointObserver.isMatched(Breakpoints.Handset);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.