要在Angular Material中以水平方式显示侧边栏,您可以按照以下步骤进行操作:
ng add @angular/material
app.module.ts
文件中添加以下代码:import { MatSidenavModule } from '@angular/material/sidenav';
@NgModule({
imports: [
// other imports
MatSidenavModule
],
// rest of the module
})
export class AppModule { }
mat-sidenav-container
和mat-sidenav
组件来创建侧边栏。确保将mode
属性设置为side
,并将opened
属性设置为控制侧边栏是否打开的布尔值。
.mat-sidenav-container {
height: 100vh;
}
.mat-sidenav {
width: 200px;
}
.mat-sidenav-content {
margin-left: 200px;
}
这将创建一个宽度为200像素的侧边栏,并将主内容向右移动200像素。
请注意,这只是一种解决方法,您可以根据您的需求进行调整和修改。