要实现Angular Material的侧边栏悬停效果,你可以按照以下步骤进行操作:
ng add @angular/material
import { MatSidenavModule } from '@angular/material/sidenav';
@NgModule({
imports: [
...
MatSidenavModule,
...
],
...
})
export class YourModule { }
import { ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
export class YourComponent {
@ViewChild('sidenav') sidenav: MatSidenav;
}
mat-sidenav-content
元素上添加以下代码:
.mat-sidenav {
width: 300px;
background-color: #f0f0f0;
}
这样,当鼠标悬停在主要内容上时,侧边栏将自动打开。当鼠标离开时,侧边栏将关闭。根据你的需求,你可以自定义侧边栏的样式。