Angular 入门教程系列：27：可折叠的sidebar和菜单

最新推荐文章于 2024-02-19 17:18:00 发布

淼叔

最新推荐文章于 2024-02-19 17:18:00 发布

阅读量8k

点赞数

分类专栏： # 前端 # Angular快速入门

本文链接：https://blog.csdn.net/liumiaocn/article/details/81356787

版权

本文是Angular入门教程的一部分，详细介绍了如何利用Zorro库中的nz-sider和menu组件创建可折叠的侧边栏和菜单。通过设置nzInlineCollapsed属性和nzCollapsed属性，可以轻松实现动态折叠效果。

摘要由CSDN通过智能技术生成

zorro对nz-sider和menu都提供了折叠的选项，可以很容易实现动态折叠的效果。

menu的nzInlineCollapsed

menu通过nzInlineCollapsed的设定进行

html

liumiaocn:default-layout liumiao$ cat default-layout.component.html 
<nz-layout>
  <nz-header>
    <button nz-button [nzType]="'primary'" (click)="handleCollapseAction()" style="margin-bottom: 10px;">
      <i class="anticon" [class.anticon-menu-unfold]="isCollapsed" [class.anticon-menu-fold]="!isCollapsed"></i>
    </button>
  </nz-header>
  <nz-layout>
    <nz-sider>
      <div>
        <ul nz-menu [nzMode]="'inline'" nzTheme='light' [nzInlineCollapsed]="isCollapsed">
          <li nz-menu-item>
            <span title>
              <i class="anticon anticon-mail"></i>
              <span>Navigation One</span>
            </span>