antd中布局

菜单
例子只支持2级，现在想要三级，测试下！
0.7的版本：

<ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'"
    [nzInlineCollapsed]="isCollapsed">
  <li nz-submenu>
    <span title>
      <i class="anticon anticon-user"></i>
      <span class="nav-text">用户</span>
    </span>
    <ul>
      <li nz-menu-item>张三</li>
      <li nz-menu-item>李四</li>
      <li nz-menu-item>王五</li>
    </ul>
  </li>
  <li nz-submenu>
    <span title>
      <i class="anticon anticon-team"></i>
      <span class="nav-text">团队</span>
    </span>
    <ul>
      <li nz-menu-item>团队1</li>
      <li  nz-submenu>
        <span title>
        <i class="anticon anticon-user"></i>
        <span class="nav-text">团队2</span>
        </span>
        <ul>
          <li nz-menu-item>张三</li>
          <li nz-menu-item>李四</li>
          <li nz-menu-item>王五</li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-menu-item>
    <span>
      <i class="anticon anticon-file"></i>
      <span class="nav-text">文件管理</span>
    </span>
  </li>
</ul>

生成别的组件：trend，log

 ng g c pages/device-mgmt/components/log --view-encapsulation None

pages。HTML：

  <nz-layout style="height: 100%;">
  <nz-content style="margin:0 16px;height: 100%;">
   <div class="page-box">
          <router-outlet></router-outlet>
        </div>


.page-box {
  padding: 24px;
  background: #fff;
  min-height: 360px;
  height: 100%;
}

menu拆分为组件的时候：
折叠的时候，并没有字体没有消失！

.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow

.ant-menu-inline-collapsed 这个类没有生成！还是原先的.ant-menu-inline类（ul上的类）

猜你喜欢