以下是一个使用Angular实现侧边栏在窗口宽度上切换的示例代码:
.sidebar-container {
width: 250px;
transition: width 0.3s ease;
}
.collapsed {
width: 0;
}
isCollapsed
来控制侧边栏的切换,并在切换按钮的点击事件中切换该变量的值:import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
isCollapsed = false;
toggleSidebar() {
this.isCollapsed = !this.isCollapsed;
}
}
这样当点击切换按钮时,侧边栏的宽度会从原来的宽度逐渐变为0,实现了侧边栏在窗口宽度上的切换效果。