下面是一个使用Angular和Bootstrap实现可切换的侧边栏导航栏的代码示例:
app.component.html:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isSidebarOpen = false;
toggleSidebar() {
this.isSidebarOpen = !this.isSidebarOpen;
}
}
app.component.css:
.sidebar {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: -200px;
background-color: #f5f5f5;
transition: left 0.3s;
}
.sidebar.active {
left: 0;
}
.main-content {
margin-left: 200px;
}
在这个示例中,我们使用了一个名为isSidebarOpen
的变量来控制侧边栏的显示和隐藏。点击“切换侧边栏”按钮时,会调用toggleSidebar()
方法,该方法会将isSidebarOpen
的值取反,从而实现侧边栏的切换。
我们使用了ngClass指令来根据isSidebarOpen
变量的值动态添加或移除active
类,从而控制侧边栏的显示和隐藏。使用Bootstrap的样式来美化侧边栏和导航栏。
注意,为了使侧边栏能够正常工作,还需要在angular.json
文件中导入Bootstrap的CSS文件。